@ngrok/mantle 0.80.0 → 0.81.1

package/dist/field.d.ts

@@ -1,10 +1,10 @@
 import { n as WithAsChild } from "./as-child-D23mGo4f.js";
-import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
-import { n as IconButtonAppearance, r as IconButtonProps } from "./icon-button-C1AfGnQx.js";
-import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./validation-7QeiTFwl.js";
+import { t as ButtonIntent } from "./button-DdSKSj1c.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
+import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./field-7QeiTFwl.js";
 import { t as Label } from "./label-C6YH9skg.js";
-import { t as Popover } from "./index-B8mIWKIU.js";
-import { t as Slot } from "./index-BtwKJTLq.js";
+import { t as Popover } from "./popover-CE4OlWkd.js";
+import { t as Slot } from "./slot-BtwKJTLq.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/field/field-context.d.ts
 /**
@@ -96,10 +96,7 @@ declare const FieldSet: ({ className, ref, ...props }: ComponentProps<"fieldset"
  * </Field.Set>
  * ```
  */
-declare const Legend: {
-  ({ className, ref, ...props }: ComponentProps<"legend">): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Legend: ({ className, ref, ...props }: ComponentProps<"legend">) => import("react").JSX.Element;
 /**
  * Caption for a `Field.Item`. Renders the Mantle `Label` with the same
  * `htmlFor`, click-to-focus, disabled, and typography behavior — but inside a
@@ -170,10 +167,7 @@ declare const FieldLabel: ({ htmlFor, ref, ...props }: ComponentProps<typeof Lab
  * </Field.Item>
  * ```
  */
-declare const LabelText: {
-  ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild): import("react").JSX.Element;
-  displayName: string;
-};
+declare const LabelText: ({ asChild, className, ref, ...props }: ComponentProps<"p"> & WithAsChild) => import("react").JSX.Element;
 /**
  * Horizontal layout container for the label area of a field. Aligns a
  * `<Field.Label>` (which may contain `Field.Optional`) with adjacent affordances
@@ -212,10 +206,7 @@ declare const LabelText: {
  * </Field.Group>
  * ```
  */
-declare const LabelRow: {
-  ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
-  displayName: string;
-};
+declare const LabelRow: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
 /**
  * Props for the default help popover trigger. A contextual label is required
  * so repeated help affordances do not all share the same accessible name.
@@ -280,10 +271,7 @@ type FieldHelpTriggerProps = Partial<Omit<IconButtonProps, "appearance" | "icon"
  * </Field.Group>
  * ```
  */
-declare const HelpTrigger: {
-  ({ appearance, className, icon, intent, label, ref, size, type, ...props }: FieldHelpTriggerProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const HelpTrigger: ({ appearance, className, icon, intent, label, ref, size, type, ...props }: FieldHelpTriggerProps) => import("react").JSX.Element;
 /**
  * The popover body for a `Field.Help`. Wraps `Popover.Content` so all
  * positioning / sizing options (`side`, `align`, `preferredWidth`, etc.)
@@ -315,10 +303,7 @@ declare const HelpTrigger: {
  * </Field.Group>
  * ```
  */
-declare const HelpContent: {
-  ({ ref, ...props }: ComponentProps<typeof Popover.Content>): import("react").JSX.Element;
-  displayName: string;
-};
+declare const HelpContent: ({ ref, ...props }: ComponentProps<typeof Popover.Content>) => import("react").JSX.Element;
 /**
  * Inline "(Optional)" suffix to mark a field as optional. Defaults to the
  * literal string `(Optional)` so the common case is `<Field.Optional />` with
@@ -354,10 +339,7 @@ declare const HelpContent: {
  * </Field.Group>
  * ```
  */
-declare const Optional: {
-  ({ asChild, children, className, ref, ...props }: ComponentProps<"span"> & WithAsChild): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Optional: ({ asChild, children, className, ref, ...props }: ComponentProps<"span"> & WithAsChild) => import("react").JSX.Element;
 /**
  * Layout container that stacks multiple `Field.Item`s vertically with
  * `gap-4` between them. This is the default way to compose multiple fields
@@ -389,9 +371,17 @@ declare const Optional: {
  * </Field.Group>
  * ```
  */
-declare const Group: {
-  ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
-  displayName: string;
+declare const Group: ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild) => import("react").JSX.Element;
+/**
+ * Props for `Field.Item`.
+ */
+type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
+  /**
+   * Form-value name for the field. Required so `Field.Control` can splat
+   * it onto the focusable child while `Field.Item` owns the stable
+   * generated control id used by `Field.Label`'s `htmlFor`.
+   */
+  name: string;
 };
 /**
  * A single form field — `Label`, a control (`Input`, `Select`, `Checkbox`,
@@ -437,18 +427,7 @@ declare const Group: {
  * </Field.Group>
  * ```
  */
-type FieldItemProps = ComponentProps<"div"> & WithAsChild & WithValidation & {
-  /**
-   * Form-value name for the field. Required so `Field.Control` can splat
-   * it onto the focusable child while `Field.Item` owns the stable
-   * generated control id used by `Field.Label`'s `htmlFor`.
-   */
-  name: string;
-};
-declare const Item: {
-  ({ asChild, children, className, name, ref, validation: validationProp, ...props }: FieldItemProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Item: ({ asChild, children, className, name, ref, validation: validationProp, ...props }: FieldItemProps) => import("react").JSX.Element;
 type FieldControlSlotProps = Omit<ComponentProps<typeof Slot>, "aria-describedby" | "aria-errormessage" | "aria-invalid" | "children">;
 /**
  * Element-child form of `Field.Control`. Renders via `Slot`, so it accepts
@@ -550,10 +529,7 @@ type FieldControlProps = FieldControlElementProps | FieldControlRenderProps;
  * </Field.Group>
  * ```
  */
-declare const Control: {
-  ({ children, ref, ...props }: FieldControlProps): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Control: ({ children, ref, ...props }: FieldControlProps) => import("react").JSX.Element;
 /**
  * Helper / hint text. Renders a `<p>` in the muted body color so it reads
  * as secondary to the bolder content above it. Use inside `Field.Item`, below
@@ -593,10 +569,7 @@ declare const Control: {
  * </Field.Group>
  * ```
  */
-declare const Description: {
-  ({ asChild, className, ref, ...props }: Omit<ComponentProps<"p">, "id"> & WithAsChild): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Description: ({ asChild, className, ref, ...props }: Omit<ComponentProps<"p">, "id"> & WithAsChild) => import("react").JSX.Element;
 /**
  * A single error message list item for a field. Renders an `<li>` in
  * `text-danger-600` so it stands out from a sibling `Field.Description`.
@@ -904,7 +877,7 @@ declare const Field: {
    * opt out (e.g. when the focusable element is rendered outside of
    * `Field.Control`).
    *
-   * @see https://mantle.ngrok.com/components/forms/label
+   * @see https://mantle.ngrok.com/components/forms/field#fieldlabel
    *
    * @example
    * ```tsx

package/dist/field.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./icon-button-DiOhreJD.js";import{i,n as a,r as o,t as s}from"./validation-Bpptk_9t.js";import{n as c,r as l,t as u}from"./field-context-BR01g789.js";import{t as d}from"./label-D-D11mlp.js";import{t as f}from"./popover-CBMADtjV.js";import{Children as p,Fragment as m,cloneElement as h,isValidElement as g,useCallback as _,useContext as v,useId as y,useMemo as b,useState as x}from"react";import S from"tiny-invariant";import{jsx as C}from"react/jsx-runtime";import{QuestionIcon as w}from"@phosphor-icons/react/Question";const T=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},E=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),D=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!g(e)){n=!0;return}if(e.type===t){n=E(e.props.children);return}if(e.type===m){n=D({children:e.props.children,errorItemType:t});return}n=!0}}),n},O=({className:e,ref:n,...r})=>C(`fieldset`,{ref:n,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...r}),k=({className:e,ref:n,...r})=>C(`legend`,{ref:n,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...r});k.displayName=`FieldLegend`;const A=({htmlFor:e,ref:t,...n})=>{let r=v(c);return C(d,{ref:t,htmlFor:e??r?.controlId,...n})},j=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...a});j.displayName=`FieldLabelText`;const M=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...a});M.displayName=`FieldLabelRow`;const N=f.Root,P=C(w,{}),F=({appearance:e=`ghost`,className:n,icon:i=P,intent:a=`neutral`,label:o,ref:s,size:c=`xs`,type:l=`button`,...u})=>C(f.Trigger,{asChild:!0,children:C(r,{ref:s,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,intent:a,label:o,size:c,type:l,...u})});F.displayName=`FieldHelpTrigger`;const I=({ref:e,...t})=>C(f.Content,{ref:e,"data-slot":`field-help-content`,...t});I.displayName=`FieldHelpContent`;const L=({asChild:e,children:r,className:i,ref:a,...o})=>C(e?n:`span`,{ref:a,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...o,children:r??`(Optional)`});L.displayName=`FieldOptional`;const R=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...a});R.displayName=`FieldGroup`;const z=({asChild:e,children:r,className:a,name:o,ref:l,validation:u,...d})=>{let f=e?n:`div`,p=y(),m=y(),h=y(),[g,v]=x(!1),S=i(u??(g?`error`:void 0)),w=_(()=>(v(!0),()=>{v(!1)}),[]),T=b(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:o,registerError:w,validation:S}),[p,m,h,g,o,w,S]);return C(c.Provider,{value:T,children:C(s,{validation:S,children:C(f,{ref:l,"data-slot":`field-item`,"data-validation":S,className:t(`flex w-full flex-col gap-1.5`,a),...d,children:r})})})};z.displayName=`FieldItem`;const B=({children:e,ref:t,...r})=>{let i=v(c),a=l({context:i});return typeof e==`function`?C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(S(g(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:C(n,{ref:t,...r,children:h(e,a.ariaProps)})})}))};B.displayName=`FieldControl`;const V=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-description`,id:v(c)?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...a});V.displayName=`FieldDescription`;const H=({children:e,className:n,ref:r,...i})=>E(e)?C(`li`,{ref:r,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...i,children:e}):null,U=({messages:e,ref:t,...n})=>C(W,{ref:t,...n,children:T(e).map(e=>C(H,{children:e},e))}),W=({asChild:r,children:i,className:a,ref:o,...s})=>{let l=D({children:i,errorItemType:H}),u=v(c),d=u?.registerError;return e(()=>{if(!(!l||d==null))return d()},[l,d]),l?C(r?n:`ul`,{ref:o,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...s,children:i}):null},G={Item:z,Control:B,Group:R,Set:O,Legend:k,Label:A,LabelText:j,LabelRow:M,Help:N,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>T(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,K as toErrorMessages};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./button-BAno7KIU.js";import{i,n as a,r as o,t as s}from"./field-Bpptk_9t.js";import{n as c,r as l,t as u}from"./field-B1wqeZr4.js";import{t as d}from"./label-D-D11mlp.js";import{t as f}from"./popover-CQ9s7jG5.js";import{Children as p,Fragment as m,cloneElement as h,isValidElement as g,useCallback as _,useContext as v,useId as y,useMemo as b,useState as x}from"react";import S from"tiny-invariant";import{jsx as C}from"react/jsx-runtime";import{QuestionIcon as w}from"@phosphor-icons/react/Question";const T=e=>{let t=[],n=new Set;for(let r of e??[]){if(typeof r!=`string`)continue;let e=r.trim();e.length===0||n.has(e)||(n.add(e),t.push(e))}return t},E=e=>!(e==null||typeof e==`boolean`||typeof e==`string`&&e.trim().length===0),D=({children:e,errorItemType:t})=>{let n=!1;return p.forEach(e,e=>{if(!(n||e==null||typeof e==`boolean`)){if(typeof e==`string`){e.trim().length>0&&(n=!0);return}if(!g(e)){n=!0;return}if(e.type===t){n=E(e.props.children);return}if(e.type===m){n=D({children:e.props.children,errorItemType:t});return}n=!0}}),n},O=({className:e,ref:n,...r})=>C(`fieldset`,{ref:n,"data-slot":`field-set`,className:t(`flex w-full min-w-0 flex-col gap-4 border-0 p-0`,e),...r}),k=({className:e,ref:n,...r})=>C(`legend`,{ref:n,"data-slot":`field-legend`,className:t(`text-strong mb-1.5 text-sm font-medium font-sans`,e),...r}),A=({htmlFor:e,ref:t,...n})=>{let r=v(c);return C(d,{ref:t,htmlFor:e??r?.controlId,...n})},j=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-label-text`,className:t(`text-strong text-sm font-medium font-sans`,r),...a}),M=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-label-row`,className:t(`flex items-center gap-1`,r),...a}),N=f.Root,P=C(w,{}),F=({appearance:e=`ghost`,className:n,icon:i=P,intent:a=`neutral`,label:o,ref:s,size:c=`xs`,type:l=`button`,...u})=>C(f.Trigger,{asChild:!0,children:C(r,{ref:s,appearance:e,className:t(`text-body -my-0.5`,n),icon:i,intent:a,label:o,size:c,type:l,...u})}),I=({ref:e,...t})=>C(f.Content,{ref:e,"data-slot":`field-help-content`,...t}),L=({asChild:e,children:r,className:i,ref:a,...o})=>C(e?n:`span`,{ref:a,"data-slot":`field-optional`,className:t(`text-muted text-sm font-normal font-sans`,i),...o,children:r??`(Optional)`}),R=({asChild:e,className:r,ref:i,...a})=>C(e?n:`div`,{ref:i,"data-slot":`field-group`,className:t(`flex w-full flex-col gap-4`,r),...a}),z=({asChild:e,children:r,className:a,name:o,ref:l,validation:u,...d})=>{let f=e?n:`div`,p=y(),m=y(),h=y(),[g,v]=x(!1),S=i(u??(g?`error`:void 0)),w=_(()=>(v(!0),()=>{v(!1)}),[]),T=b(()=>({controlId:p,descriptionId:m,errorId:h,hasErrors:g,name:o,registerError:w,validation:S}),[p,m,h,g,o,w,S]);return C(c.Provider,{value:T,children:C(s,{validation:S,children:C(f,{ref:l,"data-slot":`field-item`,"data-validation":S,className:t(`flex w-full flex-col gap-1.5`,a),...d,children:r})})})},B=({children:e,ref:t,...r})=>{let i=v(c),a=l({context:i});return typeof e==`function`?C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:e(a.ariaProps)})}):(S(g(e),`Field.Control expects a single React element child (or a render-prop function). Got a non-element value (string, array, fragment, null, or undefined). Wrap the control in a single element, or use the function child form: <Field.Control>{(props) => <YourControl {...props} />}</Field.Control>.`),C(s,{validation:a.validation,children:C(u.Provider,{value:i?a.ariaProps:null,children:C(n,{ref:t,...r,children:h(e,a.ariaProps)})})}))},V=({asChild:e,className:r,ref:i,...a})=>C(e?n:`p`,{ref:i,"data-slot":`field-description`,id:v(c)?.descriptionId,className:t(`text-body text-sm leading-4`,`[:where([data-slot=field-error-list]+&)]:-mt-1.5`,r),...a}),H=({children:e,className:n,ref:r,...i})=>E(e)?C(`li`,{ref:r,"data-slot":`field-error`,className:t(`text-danger-600 text-sm leading-4`,n),...i,children:e}):null,U=({messages:e,ref:t,...n})=>C(W,{ref:t,...n,children:T(e).map(e=>C(H,{children:e},e))}),W=({asChild:r,children:i,className:a,ref:o,...s})=>{let l=D({children:i,errorItemType:H}),u=v(c),d=u?.registerError;return e(()=>{if(!(!l||d==null))return d()},[l,d]),l?C(r?n:`ul`,{ref:o,"data-slot":`field-error-list`,id:u?.errorId,role:`list`,className:t(`m-0 flex w-full flex-col list-none p-0`,a),...s,children:i}):null},G={Item:z,Control:B,Group:R,Set:O,Legend:k,Label:A,LabelText:j,LabelRow:M,Help:N,HelpTrigger:F,HelpContent:I,Optional:L,Description:V,Errors:U,ErrorList:W,ErrorItem:H},K=e=>T(e?.map(e=>typeof e==`string`||!e?e:e.message));export{G as Field,a as isAriaInvalid,o as parseValidation,i as resolveValidation,K as toErrorMessages};

package/dist/flag.d.ts

@@ -57,7 +57,7 @@ type Props = Omit<ComponentProps<"div">, "children"> & {
  * **Loading.** Defaults to `loading="lazy"`. Use `loading="eager"` for flags
  * above the fold or in critical content.
  *
- * @see https://mantle.ngrok.com/components/data-display/flag#flag
+ * @see https://mantle.ngrok.com/components/data-display/flag
  *
  * @example
  * ```tsx

package/dist/hooks.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./use-matches-media-query-CMSxHR9n.js";import{r}from"./browser-only-CPH56Xw_.js";import{t as i}from"./use-copy-to-clipboard-DqQ0_N3E.js";import{n as a,t as o}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as s}from"./in-view-C2DpZ6s0.js";import{useCallback as c,useEffect as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";const h=[`2xl`,`xl`,`lg`,`md`,`sm`,`xs`,`2xs`],g=[`default`,...h];function _(){return m(j,M,()=>`default`)}function v(e){return m(P(e),I(e),()=>!1)}const y={"2xl":`(min-width: 96rem)`,xl:`(min-width: 80rem)`,lg:`(min-width: 64rem)`,md:`(min-width: 48rem)`,sm:`(min-width: 40rem)`,xs:`(min-width: 30rem)`,"2xs":`(min-width: 22.5rem)`},b={"2xl":`(max-width: 95.99rem)`,xl:`(max-width: 79.99rem)`,lg:`(max-width: 63.99rem)`,md:`(max-width: 47.99rem)`,sm:`(max-width: 39.99rem)`,xs:`(max-width: 29.99rem)`,"2xs":`(max-width: 22.49rem)`};let x=null,S=null;function C(){return x||={"2xl":window.matchMedia(y[`2xl`]),xl:window.matchMedia(y.xl),lg:window.matchMedia(y.lg),md:window.matchMedia(y.md),sm:window.matchMedia(y.sm),xs:window.matchMedia(y.xs),"2xs":window.matchMedia(y[`2xs`])},x}function w(e){return S||={"2xl":window.matchMedia(b[`2xl`]),xl:window.matchMedia(b.xl),lg:window.matchMedia(b.lg),md:window.matchMedia(b.md),sm:window.matchMedia(b.sm),xs:window.matchMedia(b.xs),"2xs":window.matchMedia(b[`2xs`])},S[e]}let T=`default`;const E=new Set;let D=!1;function O(){let e=C();for(let t of h)if(e[t].matches)return t;return`default`}let k=!1;function A(){k||(k=!0,requestAnimationFrame(()=>{k=!1;let e=O();if(e!==T){T=e;for(let e of E)e()}}))}function j(e){if(E.add(e),!D){D=!0;let e=C();T=O();for(let t of Object.values(e))t.addEventListener(`change`,A)}return e(),()=>{if(E.delete(e),E.size===0&&D){D=!1;let e=C();for(let t of Object.values(e))t.removeEventListener(`change`,A)}}}function M(){return T}const N=new Map;function P(e){let t=N.get(e);return t||(t=t=>{let n=w(e),r=!1,i=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener(`change`,i),()=>{n.removeEventListener(`change`,i)}},N.set(e,t),t)}const F=new Map;function I(e){let t=F.get(e);return t||(t=()=>w(e).matches,F.set(e,t),t)}function L(e){let t=f(e);return l(()=>{t.current=e}),u(()=>((...e)=>t.current?.(...e)),[])}function R(e,t){let[n,r]=p(e);return l(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function z(e,t){let n=L(e),r=f(0);return l(()=>()=>window.clearTimeout(r.current),[]),c((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}function B(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.localStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function V(){return null}function H(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function U(e,t){let n=m(u(()=>B(e),[e]),()=>window.localStorage.getItem(e),V);return[n==null?t:H(n,t),c(t=>{let n=JSON.stringify(t);window.localStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.localStorage}))},[e])]}function W(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.sessionStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function G(){return null}function K(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function q(e,t){let n=m(u(()=>W(e),[e]),()=>window.sessionStorage.getItem(e),G);return[n==null?t:K(n,t),c(t=>{let n=JSON.stringify(t);window.sessionStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.sessionStorage}))},[e])]}function J(){let e=a();return u(()=>e?`auto`:`smooth`,[e])}function Y(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,c]=p(a);return l(()=>{if(!e.current||i&&o)return;function a(){return c(!0),i?void 0:()=>c(!1)}let l={root:t&&t.current||void 0,margin:n,amount:r};return s(e.current,a,l)},[t,e,n,i,r]),o}function X(){let e=f([]),t=f([]),[,n]=d(e=>e+1,0),r=c(r=>{e.current.push(r),t.current=[],n()},[]),i=c(r=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(r),n(),i},[]),a=c(r=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(r),n(),i},[]),o=e.current.length>0,s=t.current.length>0;return u(()=>({canUndo:o,canRedo:s,push:r,undo:i,redo:a}),[o,s,r,i,a])}export{g as breakpoints,o as getPrefersReducedMotion,_ as useBreakpoint,L as useCallbackRef,t as useComposedRefs,i as useCopyToClipboard,R as useDebounce,z as useDebouncedCallback,Y as useInView,v as useIsBelowBreakpoint,r as useIsHydrated,e as useIsomorphicLayoutEffect,U as useLocalStorage,n as useMatchesMediaQuery,a as usePrefersReducedMotion,J as useScrollBehavior,q as useSessionStorage,X as useUndoRedo};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{r as n}from"./browser-only-CPH56Xw_.js";import{t as r}from"./use-copy-to-clipboard-DqQ0_N3E.js";import{t as i}from"./use-matches-media-query-CMSxHR9n.js";import{n as a,t as o}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as s}from"./in-view-C2DpZ6s0.js";import{useCallback as c,useEffect as l,useMemo as u,useReducer as d,useRef as f,useState as p,useSyncExternalStore as m}from"react";const h=[`2xl`,`xl`,`lg`,`md`,`sm`,`xs`,`2xs`],g=[`default`,...h];function _(){return m(j,M,()=>`default`)}function v(e){return m(P(e),I(e),()=>!1)}const y={"2xl":`(min-width: 96rem)`,xl:`(min-width: 80rem)`,lg:`(min-width: 64rem)`,md:`(min-width: 48rem)`,sm:`(min-width: 40rem)`,xs:`(min-width: 30rem)`,"2xs":`(min-width: 22.5rem)`},b={"2xl":`(max-width: 95.99rem)`,xl:`(max-width: 79.99rem)`,lg:`(max-width: 63.99rem)`,md:`(max-width: 47.99rem)`,sm:`(max-width: 39.99rem)`,xs:`(max-width: 29.99rem)`,"2xs":`(max-width: 22.49rem)`};let x=null,S=null;function C(){return x||={"2xl":window.matchMedia(y[`2xl`]),xl:window.matchMedia(y.xl),lg:window.matchMedia(y.lg),md:window.matchMedia(y.md),sm:window.matchMedia(y.sm),xs:window.matchMedia(y.xs),"2xs":window.matchMedia(y[`2xs`])},x}function w(e){return S||={"2xl":window.matchMedia(b[`2xl`]),xl:window.matchMedia(b.xl),lg:window.matchMedia(b.lg),md:window.matchMedia(b.md),sm:window.matchMedia(b.sm),xs:window.matchMedia(b.xs),"2xs":window.matchMedia(b[`2xs`])},S[e]}let T=`default`;const E=new Set;let D=!1;function O(){let e=C();for(let t of h)if(e[t].matches)return t;return`default`}let k=!1;function A(){k||(k=!0,requestAnimationFrame(()=>{k=!1;let e=O();if(e!==T){T=e;for(let e of E)e()}}))}function j(e){if(E.add(e),!D){D=!0;let e=C();T=O();for(let t of Object.values(e))t.addEventListener(`change`,A)}return e(),()=>{if(E.delete(e),E.size===0&&D){D=!1;let e=C();for(let t of Object.values(e))t.removeEventListener(`change`,A)}}}function M(){return T}const N=new Map;function P(e){let t=N.get(e);return t||(t=t=>{let n=w(e),r=!1,i=()=>{r||(r=!0,requestAnimationFrame(()=>{r=!1,t()}))};return n.addEventListener(`change`,i),()=>{n.removeEventListener(`change`,i)}},N.set(e,t),t)}const F=new Map;function I(e){let t=F.get(e);return t||(t=()=>w(e).matches,F.set(e,t),t)}function L(e){let t=f(e);return l(()=>{t.current=e}),u(()=>((...e)=>t.current?.(...e)),[])}function R(e,t){let[n,r]=p(e);return l(()=>{let n=window.setTimeout(()=>{r(e)},t.waitMs);return()=>{window.clearTimeout(n)}},[e,t.waitMs]),n}function z(e,t){let n=L(e),r=f(0);return l(()=>()=>window.clearTimeout(r.current),[]),c((...e)=>{window.clearTimeout(r.current),r.current=window.setTimeout(()=>n(...e),t.waitMs)},[n,t.waitMs])}function B(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.localStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function V(){return null}function H(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function U(e,t){let n=m(u(()=>B(e),[e]),()=>window.localStorage.getItem(e),V);return[n==null?t:H(n,t),c(t=>{let n=JSON.stringify(t);window.localStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.localStorage}))},[e])]}function W(e){return function(t){function n(n){let r=n.storageArea==null||n.storageArea===window.sessionStorage,i=n.key==null||n.key===e;r&&i&&t()}return window.addEventListener(`storage`,n),()=>{window.removeEventListener(`storage`,n)}}}function G(){return null}function K(e,t){try{let n=JSON.parse(e);return typeof n==`string`?n:t}catch{return t}}function q(e,t){let n=m(u(()=>W(e),[e]),()=>window.sessionStorage.getItem(e),G);return[n==null?t:K(n,t),c(t=>{let n=JSON.stringify(t);window.sessionStorage.setItem(e,n),window.dispatchEvent(new StorageEvent(`storage`,{key:e,newValue:n,storageArea:window.sessionStorage}))},[e])]}function J(){let e=a();return u(()=>e?`auto`:`smooth`,[e])}function Y(e,{root:t,margin:n,amount:r,once:i=!1,initial:a=!1}={}){let[o,c]=p(a);return l(()=>{if(!e.current||i&&o)return;function a(){return c(!0),i?void 0:()=>c(!1)}let l={root:t&&t.current||void 0,margin:n,amount:r};return s(e.current,a,l)},[t,e,n,i,r]),o}function X(){let e=f([]),t=f([]),[,n]=d(e=>e+1,0),r=c(r=>{e.current.push(r),t.current=[],n()},[]),i=c(r=>{let i=e.current[e.current.length-1];if(i!==void 0)return e.current.pop(),t.current.push(r),n(),i},[]),a=c(r=>{let i=t.current[t.current.length-1];if(i!==void 0)return t.current.pop(),e.current.push(r),n(),i},[]),o=e.current.length>0,s=t.current.length>0;return u(()=>({canUndo:o,canRedo:s,push:r,undo:i,redo:a}),[o,s,r,i,a])}export{g as breakpoints,o as getPrefersReducedMotion,_ as useBreakpoint,L as useCallbackRef,t as useComposedRefs,r as useCopyToClipboard,R as useDebounce,z as useDebouncedCallback,Y as useInView,v as useIsBelowBreakpoint,n as useIsHydrated,e as useIsomorphicLayoutEffect,U as useLocalStorage,i as useMatchesMediaQuery,a as usePrefersReducedMotion,J as useScrollBehavior,q as useSessionStorage,X as useUndoRedo};

package/dist/hover-card.d.ts

@@ -25,10 +25,7 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
  * </HoverCard.Root>
  * ```
  */
-declare const Root: {
-  ({ closeDelay, openDelay, ...props }: ComponentProps<typeof HoverCardPrimitive.Root>): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Root: ({ closeDelay, openDelay, ...props }: ComponentProps<typeof HoverCardPrimitive.Root>) => import("react").JSX.Element;
 /**
  * The trigger element that opens the hover card when hovered.
  *
@@ -48,10 +45,7 @@ declare const Root: {
  * </HoverCard.Root>
  * ```
  */
-declare const Trigger: {
-  (props: ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react").JSX.Element;
-  displayName: string;
-};
+declare const Trigger: (props: ComponentProps<typeof HoverCardPrimitive.Trigger>) => import("react").JSX.Element;
 /**
  * The content to render inside the hover card.
  *
@@ -75,10 +69,7 @@ declare const Trigger: {
  * </HoverCard.Root>
  * ```
  */
-declare const Content: {
-  ({ className, onClick, align, sideOffset, ...props }: ComponentProps<typeof HoverCardPrimitive.Content>): import("react").JSX.Element;
-  displayName: string | undefined;
-};
+declare const Content: ({ className, onClick, align, sideOffset, ...props }: ComponentProps<typeof HoverCardPrimitive.Content>) => import("react").JSX.Element;
 /**
  * A floating card that appears when a user hovers over a trigger element.
  *

package/dist/hover-card.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";import*as n from"@radix-ui/react-hover-card";const r=({closeDelay:e=300,openDelay:r=100,...i})=>t(n.Root,{closeDelay:e,openDelay:r,...i});r.displayName=`HoverCard`;const i=e=>t(n.Trigger,{"data-slot":`hover-card-trigger`,...e});i.displayName=`HoverCardTrigger`;const a=n.Portal;a.displayName=`HoverCardPortal`;const o=({className:r,onClick:i,align:o=`center`,sideOffset:s=4,...c})=>t(a,{children:t(n.Content,{"data-slot":`hover-card-content`,align:o,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,r),onClick:e=>{e.stopPropagation(),i?.(e)},...c})});o.displayName=n.Content.displayName;const s={Root:r,Content:o,Portal:a,Trigger:i};export{s as HoverCard};
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";import*as n from"@radix-ui/react-hover-card";const r=({closeDelay:e=300,openDelay:r=100,...i})=>t(n.Root,{closeDelay:e,openDelay:r,...i}),i=e=>t(n.Trigger,{"data-slot":`hover-card-trigger`,...e}),a=n.Portal,o={Root:r,Content:({className:r,onClick:i,align:o=`center`,sideOffset:s=4,...c})=>t(a,{children:t(n.Content,{"data-slot":`hover-card-content`,align:o,sideOffset:s,className:e(`bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden`,`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2`,r),onClick:e=>{e.stopPropagation(),i?.(e)},...c})}),Portal:a,Trigger:i};export{o as HoverCard};

package/dist/{svg-only-CdI_v82i.d.ts → icon-CX_gj6sW.d.ts}

@@ -1,4 +1,4 @@
-import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
 import { ReactNode } from "react";
 //#region src/components/icon/svg-only.d.ts
 type SvgOnlyProps = Omit<SvgAttributes, "children"> & {

package/dist/{icon-BDqpcZ-n.d.ts → icon-k4E9yNWD.d.ts}

@@ -1,4 +1,4 @@
-import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
 import { ReactNode } from "react";
 //#region src/components/icon/icon.d.ts
 type IconProps = Omit<SvgAttributes, "children"> & {

package/dist/icon-lZ48P8Nn.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-d-nMCfAI.js";import{jsx as n}from"react/jsx-runtime";const r=({className:r,style:i,svg:a,ref:o,...s})=>n(t,{ref:o,"data-slot":`icon`,className:e(`size-5`,r),style:i,svg:a,...s});export{r as t};

package/dist/icon.d.ts

@@ -1,4 +1,4 @@
-import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
-import { n as IconProps, t as Icon } from "./icon-BDqpcZ-n.js";
-import { n as SvgOnlyProps, t as SvgOnly } from "./svg-only-CdI_v82i.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
+import { n as IconProps, t as Icon } from "./icon-k4E9yNWD.js";
+import { n as SvgOnlyProps, t as SvgOnly } from "./icon-CX_gj6sW.js";
 export { Icon, type IconProps, type SvgAttributes, SvgOnly, type SvgOnlyProps };

package/dist/icon.js

@@ -1 +1 @@
-import{t as e}from"./svg-only-d-nMCfAI.js";import{t}from"./icon-CGgMKpJg.js";export{t as Icon,e as SvgOnly};
+import{t as e}from"./icon-d-nMCfAI.js";import{t}from"./icon-lZ48P8Nn.js";export{t as Icon,e as SvgOnly};

package/dist/icons-DLCs1hLP.js

@@ -0,0 +1 @@
+import{s as e}from"./theme-C26-Xolp.js";import{jsx as t}from"react/jsx-runtime";import{DesktopIcon as n}from"@phosphor-icons/react/Desktop";import{MoonIcon as r}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";function a(n){return t(o,{theme:e(),...n})}function o({theme:e,...a}){switch(e){case`system`:return t(n,{...a});case`light`:return t(i,{...a});case`dark`:return t(r,{...a});case`light-high-contrast`:return t(i,{...a,weight:`fill`});case`dark-high-contrast`:return t(r,{...a,weight:`fill`})}}export{o as n,a as t};

package/dist/icons.d.ts

@@ -1,6 +1,6 @@
-import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
 import { a as AlphanumericSortingDirection, c as TimeSortingDirection, o as SortingDirection, s as SortingMode } from "./direction-BjU0bPST.js";
-import { i as Theme } from "./themes-CYNpplwN.js";
+import { i as Theme } from "./theme-FbfjYiD3.js";
 import { ComponentProps } from "react";
 //#region src/components/icons/sort.d.ts
 type Props = SvgAttributes & ({
@@ -23,12 +23,26 @@ type Props = SvgAttributes & ({
 /**
  * A sorting icon that can be used to indicate the sorting direction of a table column or list.
  * It is aware of the sorting mode (alphanumeric or time) and the sorting direction (ascending or descending).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <SortIcon mode="time" direction="newest-to-oldest" />
+ * ```
  */
 declare const SortIcon: ({ mode, direction, ...props }: Props) => import("react").JSX.Element;
 //#endregion
 //#region src/components/icons/traffic-policy-file.d.ts
 /**
  * An icon representing a traffic policy file.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <TrafficPolicyFileIcon className="size-5" />
+ * ```
  */
 declare function TrafficPolicyFileIcon(props: SvgAttributes): import("react").JSX.Element;
 //#endregion
@@ -39,6 +53,13 @@ declare function TrafficPolicyFileIcon(props: SvgAttributes): import("react").JS
  * - `dark`: MoonIcon
  * - `light-high-contrast`: SunIcon (fill)
  * - `dark-high-contrast`: MoonIcon (fill)
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <AutoThemeIcon className="size-5" />
+ * ```
  */
 declare function AutoThemeIcon(props: SvgAttributes): import("react").JSX.Element;
 type ThemeIconProps = SvgAttributes & {
@@ -52,12 +73,28 @@ type ThemeIconProps = SvgAttributes & {
  * - `dark`: MoonIcon
  * - `light-high-contrast`: SunIcon (fill)
  * - `dark-high-contrast`: MoonIcon (fill)
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <ThemeIcon theme="system" />
+ * ```
  */
 declare function ThemeIcon({ theme, ...props }: ThemeIconProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/icons/types.d.ts
 /**
  * Props for an inline svg icon.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * function BrandIcon(props: InlineIconProps) {
+ * 	return <svg {...props} />;
+ * }
+ * ```
  */
 type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children"> & {
   /**
@@ -72,10 +109,24 @@ type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox"
 //#region src/components/icons/ngrok.d.ts
 /**
  * An inline svg icon that renders the ngrok wordmark logo. Fill color is determined by the `color` CSS property.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <NgrokWordmarkIcon />
+ * ```
  */
 declare function NgrokWordmarkIcon(props: Omit<InlineIconProps, "color">): import("react").JSX.Element;
 /**
  * An inline svg icon that renders the ngrok lettermark "n" logo. Fill color is determined by the `color` CSS property.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/icons
+ *
+ * @example
+ * ```tsx
+ * <NgrokLettermarkIcon />
+ * ```
  */
 declare function NgrokLettermarkIcon(props: Omit<InlineIconProps, "color">): import("react").JSX.Element;
 //#endregion

package/dist/icons.js

@@ -1 +1 @@
-import{t as e}from"./traffic-policy-file-CF1lbWtp.js";import{t}from"./sort-B_DDQcVD.js";import{n,t as r}from"./theme-wVnzzx2F.js";import{jsx as i}from"react/jsx-runtime";function a(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:i(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function o(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:i(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{r as AutoThemeIcon,o as NgrokLettermarkIcon,a as NgrokWordmarkIcon,t as SortIcon,n as ThemeIcon,e as TrafficPolicyFileIcon};
+import{t as e}from"./icons-CF1lbWtp.js";import{t}from"./icons-B_DDQcVD.js";import{n,t as r}from"./icons-DLCs1hLP.js";import{jsx as i}from"react/jsx-runtime";function a(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 94 36`,width:`2.61em`,...e,children:i(`path`,{d:`M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47m-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502`})})}function o(e){return i(`svg`,{fill:`currentColor`,height:`1em`,viewBox:`0 0 32 32`,width:`1em`,...e,children:i(`path`,{d:`M27.2 6.18a9.47 9.47 0 0 0-3.12-2.5A9.42 9.42 0 0 0 21.82 3h-6.14l-4.06 4.9V3.1H3V29h8.62V11.53h8.09l.67-.02v17.48H29V12.8c0-1.37-.13-2.6-.38-3.68a7.35 7.35 0 0 0-1.42-2.93Z`})})}export{r as AutoThemeIcon,o as NgrokLettermarkIcon,a as NgrokWordmarkIcon,t as SortIcon,n as ThemeIcon,e as TrafficPolicyFileIcon};

package/dist/input-BnlpQF0c.js

@@ -0,0 +1 @@
+import{t as e}from"./compose-refs-BdBMM9ga.js";import{t}from"./cx-IiQEAKf5.js";import{t as n}from"./icon-lZ48P8Nn.js";import{t as r}from"./clsx-DUGZgXfJ.js";import{a as i,r as a}from"./field-Bpptk_9t.js";import{createContext as o,useContext as s,useMemo as c,useRef as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{CheckCircleIcon as f}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as p}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as m}from"@phosphor-icons/react/WarningDiamond";const h=({children:e,className:t,ref:n,...r})=>{let i=!!e,a=l(null);return i?u(v,{className:t,forwardedRef:n,innerRef:a,...r,children:e}):u(v,{...r,className:t,forwardedRef:n,innerRef:a,children:u(g,{...r})})},g=({"aria-invalid":n,className:r,ref:o,validation:c,...l})=>{let{"aria-invalid":d,forwardedRef:f,innerRef:p,validation:m,...h}=s(_),g=i(),{ariaInvalid:v,validation:y}=a({"aria-invalid":d??n,validation:m??c??g}),b={...h,...l,type:l.type??h.type??`text`};return u(`input`,{"aria-invalid":v,"data-slot":`input-capture`,"data-validation":y,className:t(`placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden`,r),ref:e(o,f,p),...b})},_=o({validation:void 0,innerRef:{current:null}}),v=({"aria-invalid":e,"aria-disabled":n,"data-slot":r=`input`,children:o,className:s,disabled:l,forwardedRef:f,innerRef:p,style:m,type:h,validation:g,...v})=>{let b=i(),{validation:x}=a({"aria-invalid":e,validation:g??b}),S=c(()=>({"aria-invalid":e,"aria-disabled":n,disabled:l,type:h,validation:g,...v,forwardedRef:f,innerRef:p}),[e,n,l,h,g,v,f,p]);return u(_.Provider,{value:S,children:d(`div`,{role:`none`,"data-slot":r,"data-disabled":(l??n)||void 0,"data-validation":x||void 0,className:t(`pointer-coarse:text-base h-9 text-sm`,`bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4`,`data-disabled:opacity-50`,`has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5`,`border-form text-strong focus-within:border-accent-600 focus-within:ring-focus-accent`,`data-validation-success:border-success-600 focus-within:data-validation-success:border-success-600 focus-within:data-validation-success:ring-focus-success`,`data-validation-warning:border-warning-600 focus-within:data-validation-warning:border-warning-600 focus-within:data-validation-warning:ring-focus-warning`,`data-validation-error:border-danger-600 focus-within:data-validation-error:border-danger-600 focus-within:data-validation-error:ring-focus-danger`,`autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]`,s),onMouseDown:e=>{e.target!==p?.current&&e.preventDefault()},onClick:()=>{p?.current?.focus()},onKeyDown:()=>{p?.current!==document.activeElement&&p?.current?.focus()},style:m,children:[o,u(y,{name:v.name,validation:x})]})})},y=({name:e,validation:t})=>{switch(t){case`error`:return d(`div`,{className:`text-danger-600 order-last select-none`,children:[u(`span`,{className:`sr-only`,children:r(`The value entered for the`,e,`input has failed validation.`)}),u(n,{svg:u(p,{"aria-hidden":!0,weight:`fill`})})]});case`success`:return u(`div`,{className:`text-success-600 order-last select-none`,children:u(n,{svg:u(f,{weight:`fill`})})});case`warning`:return u(`div`,{className:`text-warning-600 order-last select-none`,children:u(n,{svg:u(m,{weight:`fill`})})});default:return null}};export{g as n,h as t};

package/dist/{input-DV9M6K4v.d.ts → input-BuYDU6CF.d.ts}

@@ -1,4 +1,4 @@
-import { o as WithValidation } from "./validation-7QeiTFwl.js";
+import { o as WithValidation } from "./field-7QeiTFwl.js";
 import { ComponentProps, PropsWithChildren } from "react";
 //#region src/components/input/types.d.ts
 /**

package/dist/input.d.ts

@@ -1,5 +1,5 @@
-import { o as WithValidation, r as Validation } from "./validation-7QeiTFwl.js";
-import { a as AutoComplete, c as WithInputType, i as InputProps, n as InputCapture, o as InputType, r as InputCaptureProps, s as WithAutoComplete, t as Input } from "./input-DV9M6K4v.js";
+import { o as WithValidation, r as Validation } from "./field-7QeiTFwl.js";
+import { a as AutoComplete, c as WithInputType, i as InputProps, n as InputCapture, o as InputType, r as InputCaptureProps, s as WithAutoComplete, t as Input } from "./input-BuYDU6CF.js";
 import { ComponentProps } from "react";
 //#region src/components/input/password-input.d.ts
 type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {

package/dist/input.js

@@ -1 +1 @@
-import{t as e}from"./icon-CGgMKpJg.js";import{n as t,t as n}from"./input-CVyAVbim.js";import{t as r}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as i}from"./is-input-CXmS0OFN.js";import{useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{EyeIcon as u}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as d}from"@phosphor-icons/react/EyeClosed";import{flushSync as f}from"react-dom";const p=({onValueVisibilityChange:i,ref:p,showValue:m=!1,...h})=>{let[g,_]=s(m),v=g?`text`:`password`,y=g?u:d,b=o(null),x=o(null);return a(()=>{_(m)},[m]),l(n,{"data-slot":`password-input`,type:v,ref:p,...h,children:[c(t,{}),l(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;f(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[l(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),c(e,{ref:b,svg:c(y,{"aria-hidden":!0})})]})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};
+import{t as e}from"./icon-lZ48P8Nn.js";import{n as t,t as n}from"./input-BnlpQF0c.js";import{t as r}from"./use-prefers-reduced-motion-CagaNRgm.js";import{t as i}from"./input-CXmS0OFN.js";import{useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{EyeIcon as u}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as d}from"@phosphor-icons/react/EyeClosed";import{flushSync as f}from"react-dom";const p=({onValueVisibilityChange:i,ref:p,showValue:m=!1,...h})=>{let[g,_]=s(m),v=g?`text`:`password`,y=g?u:d,b=o(null),x=o(null);return a(()=>{_(m)},[m]),l(n,{"data-slot":`password-input`,type:v,ref:p,...h,children:[c(t,{}),l(`button`,{type:`button`,tabIndex:-1,className:`text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0`,onClick:()=>{x.current&&=(x.current.cancel(),null);let e=!g;f(()=>{_(e)}),i?.(e);let t=b.current;t&&!r()&&(x.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),x.current.onfinish=()=>{x.current=null})},children:[l(`span`,{className:`sr-only`,children:[`Turn password visibility `,g?`off`:`on`]}),c(e,{ref:b,svg:c(y,{"aria-hidden":!0})})]})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};