@servicetitan/anvil2 3.12.2 → 3.13.1

package/dist/{NumberField-ASyiQu5l.js.map → NumberField-BWRgy-Xq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NumberField-ASyiQu5l.js","sources":["../../hammer-icon/mdi/round/remove.svg","../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgRemove = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z\" }));\nexport default SvgRemove;\n","import {\n  type ReactElement,\n  forwardRef,\n  isValidElement,\n  type ComponentPropsWithoutRef,\n  useId,\n  useRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Spinner } from \"../Spinner\";\nimport textFieldStyles from \"../TextField/TextField.module.scss\";\nimport numberFieldStyles from \"./NumberField.module.scss\";\nimport { Helper, type HelperProps } from \"../../internal/components\";\nimport { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport type { LayoutUtilProps, Size, DataTrackingId } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport IconAdd from \"@servicetitan/hammer-icon/mdi/round/add.svg\";\nimport IconRemove from \"@servicetitan/hammer-icon/mdi/round/remove.svg\";\nimport {\n  useFocusWithin,\n  useLayoutPropsUtil,\n  useNumberField,\n} from \"../../internal/hooks\";\nimport {\n  childrenToString,\n  stripInlineMarkdown,\n  warnOnce,\n} from \"../../internal/functions\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport type { FieldLabelProps } from \"../../internal/types\";\n\n/**\n * Props for the NumberField component.\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"type\" | \"inputMode\" | \"value\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"onChange\">\n * @extends LayoutUtilProps\n * @extends FieldLabelProps\n * @extends DataTrackingId\n */\nexport type NumberFieldProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  | \"size\"\n  | \"prefix\"\n  | \"type\"\n  | \"inputMode\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onChange\"\n> &\n  LayoutUtilProps &\n  FieldLabelProps & {\n    /**\n     * Error state for the field. Pass `true` to indicate error styling without a message.\n     * Pass a string, string[], or ReactElement (deprecated) for error messages.\n     */\n    error?: boolean | string | ReactElement | string[];\n    // TODO(v4.0.0): make label required\n    /**\n     * Label for the field.\n     * Omitting `label` is deprecated — it will be required in v4.0.0. Use `hideLabel` to visually hide it.\n     */\n    label?: string;\n    /**\n     * When `true`, hides the visible label and moves it to `aria-label` on the input.\n     * Requires `label` to be set — the label is always needed for accessibility.\n     * @default false\n     */\n    hideLabel?: boolean;\n    prefix?: string;\n    suffix?: string;\n    size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n    description?: HelperProps[\"description\"];\n    /**\n     * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n     */\n    errorAriaLive?: HelperProps[\"errorAriaLive\"];\n    hint?: HelperProps[\"hint\"];\n    /**\n     * Warning message(s) to display. Supports a single string or an array of strings.\n     */\n    warning?: string | string[];\n    loading?: boolean;\n    disabled?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    maximumFractionDigits?: number;\n    minimumFractionDigits?: number;\n    step?: number;\n    value?: number | null;\n    defaultValue?: number | null;\n    onChange?: (value: number | null) => void;\n    onFocus?: (event: React.FocusEvent) => void;\n    onBlur?: (event: React.FocusEvent) => void;\n    hideControls?: boolean;\n    /**\n     * When `true`, applies a subdued primary background to the field to draw attention to it.\n     * @default false\n     */\n    isHighlighted?: boolean;\n  } & DataTrackingId;\n\n/**\n * NumberField component for entering numeric values, with optional\n * increment/decrement stepper controls.\n *\n * Features:\n * - Min/max value constraints and configurable `step`\n * - Fraction-digit formatting via `minimumFractionDigits`/`maximumFractionDigits`\n * - Optional `hideControls` to hide the +/- stepper buttons\n * - Label, hint, description, error, and warning messaging\n * - Loading state with spinner, and a highlighted-field variant\n * - Optional prefix/suffix content\n *\n * @example\n * <NumberField\n *   label=\"Quantity\"\n *   value={quantity}\n *   onChange={setQuantity}\n *   minValue={0}\n *   maxValue={99}\n * />\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      error,\n      errorAriaLive: _errorAriaLive,\n      defaultValue: defaultValueProp,\n      value: valueProp,\n      label,\n      moreInfo,\n      prefix,\n      suffix,\n      size,\n      required,\n      onChange: onChangeProp,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      id: idProp,\n      description,\n      hint,\n      warning,\n      loading,\n      disabled,\n      readOnly,\n      labelProps,\n      style,\n      placeholder,\n      minValue,\n      maxValue,\n      maximumFractionDigits = 0,\n      minimumFractionDigits = 0,\n      step = 1,\n      hideControls = false,\n      hideLabel = false,\n      isHighlighted = false,\n      ...rest\n    } = componentProps;\n    const numberFieldRef = useRef<HTMLDivElement>(null);\n\n    const { props: wrapperProps } = useFocusWithin({\n      onFocus: (e) => {\n        onFocusProp?.(e);\n      },\n      onBlur: (e) => {\n        onBlurProp?.(e);\n      },\n    });\n\n    const { inputProps, inputRef, incrementButtonProps, decrementButtonProps } =\n      useNumberField({\n        minValue,\n        maxValue,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        step,\n        value: valueProp,\n        defaultValue: defaultValueProp,\n        onChange: onChangeProp,\n        label,\n        readOnly,\n      });\n\n    const combinedInputRef = useMergeRefs([numberFieldRef, inputRef, ref]);\n\n    const labelUid = useId();\n    const id = idProp ?? labelUid;\n    const prefixUid = useId();\n    const suffixUid = useId();\n    const helperUid = useId();\n    const moreInfoUid = useId();\n\n    warnDeprecatedErrorUsage(\"NumberField\", error);\n\n    // TODO(v4.0.0): remove once label is required\n    if (label === undefined) {\n      warnOnce(\n        \"NumberField: label will be required in v4.0.0. Use hideLabel to visually hide the label.\",\n      );\n    }\n\n    const errorMessages =\n      typeof error === \"boolean\" || error === undefined ? undefined : error;\n\n    const hasHelperText = hint || errorMessages || warning || description;\n\n    const ariaDescribedBy =\n      [hasHelperText && helperUid, moreInfo && moreInfoUid]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const styleCombined = { ...style, ...layoutStyles };\n\n    const data = {\n      label: childrenToString(props.label),\n      prefix: childrenToString(props.prefix),\n      suffix: childrenToString(props.suffix),\n      description: childrenToString(props.description),\n      size: props.size,\n      minValue: props.minValue,\n      maxValue: props.maxValue,\n      step: props.step,\n      maximumFractionDigits: props.maximumFractionDigits,\n      minimumFractionDigits: props.minimumFractionDigits,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"NumberField\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    return (\n      <div\n        className={cx(textFieldStyles[\"textfield\"], className)}\n        data-anv=\"number-field\"\n        style={styleCombined}\n        {...wrapperProps}\n      >\n        {/* TODO(v4.0.0): simplify to !hideLabel once label is required */}\n        {label && !hideLabel && (\n          <FieldLabel\n            moreInfo={moreInfo}\n            moreInfoId={moreInfo ? moreInfoUid : undefined}\n            required={required}\n            htmlFor={id}\n            {...labelProps}\n          >\n            {label}\n          </FieldLabel>\n        )}\n        <div\n          className={cx(textFieldStyles[\"input-wrapper\"], {\n            [textFieldStyles[\"small\"]]: size === \"small\",\n            [textFieldStyles[\"large\"]]: size === \"large\",\n            [textFieldStyles[\"highlight\"]]: isHighlighted,\n            [numberFieldStyles[\"small\"]]: size === \"small\",\n            [numberFieldStyles[\"large\"]]: size === \"large\",\n          })}\n          role=\"presentation\"\n          onClick={() => numberFieldRef.current?.focus()}\n        >\n          {prefix ? (\n            <div\n              aria-hidden\n              className={textFieldStyles[\"prefix\"]}\n              id={`prefix${prefixUid}`}\n            >\n              {prefix}\n            </div>\n          ) : null}\n          <input\n            id={id}\n            className={cx(textFieldStyles[\"input\"], {\n              [textFieldStyles[\"error\"]]: error,\n            })}\n            data-tracking-id={trackingId}\n            {...rest}\n            {...inputProps}\n            required={required}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            disabled={disabled}\n            ref={combinedInputRef}\n            aria-label={\n              // TODO(v4.0.0): remove typeof check — label will always be string\n              hideLabel && typeof label === \"string\"\n                ? stripInlineMarkdown(label)\n                : label\n                  ? undefined\n                  : placeholder\n            }\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error ? !!error : undefined}\n          />\n          {loading ? (\n            <div\n              className={textFieldStyles[\"loading-spinner-wrapper\"]}\n              data-testid=\"spinner\"\n            >\n              <Spinner size=\"small\" />\n            </div>\n          ) : null}\n          {suffix ? (\n            <div\n              className={textFieldStyles[\"suffix\"]}\n              aria-hidden\n              id={`suffix${suffixUid}`}\n            >\n              {suffix}\n            </div>\n          ) : null}\n          {!hideControls && !disabled && !readOnly && (\n            <div className={numberFieldStyles[\"stepper-buttons\"]}>\n              <Button\n                appearance=\"secondary\"\n                size=\"small\"\n                className={numberFieldStyles[\"stepper-button\"]}\n                {...decrementButtonProps}\n              >\n                <Icon svg={IconRemove} />\n              </Button>\n              <Button\n                appearance=\"secondary\"\n                size=\"small\"\n                className={numberFieldStyles[\"stepper-button\"]}\n                {...incrementButtonProps}\n              >\n                <Icon svg={IconAdd} />\n              </Button>\n            </div>\n          )}\n        </div>\n        {hasHelperText ? (\n          <Helper\n            id={helperUid}\n            hint={hint}\n            showCounter={false}\n            error={\n              typeof errorMessages === \"string\" || Array.isArray(errorMessages)\n                ? errorMessages\n                : undefined\n            }\n            warning={warning}\n            errorMessage={\n              isValidElement(errorMessages) ? errorMessages : undefined\n            }\n            description={description}\n          />\n        ) : null}\n      </div>\n    );\n  },\n);\n\nNumberField.displayName = \"NumberField\";\n"],"names":["IconRemove","IconAdd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAM,SAAS,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,oEAAoE,EAAE,CAAC,CAAC;;AC4HhS,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA,EAAe,cAAA;AAAA,MACf,YAAA,EAAc,gBAAA;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,KAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,EAAA,EAAI,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,qBAAA,GAAwB,CAAA;AAAA,MACxB,qBAAA,GAAwB,CAAA;AAAA,MACxB,IAAA,GAAO,CAAA;AAAA,MACP,YAAA,GAAe,KAAA;AAAA,MACf,SAAA,GAAY,KAAA;AAAA,MACZ,aAAA,GAAgB,KAAA;AAAA,MAChB,GAAG;AAAA,KACL,GAAI,cAAA;AACJ,IAAA,MAAM,cAAA,GAAiB,OAAuB,IAAI,CAAA;AAElD,IAAA,MAAM,EAAE,KAAA,EAAO,YAAA,EAAa,GAAI,cAAA,CAAe;AAAA,MAC7C,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,QAAA,WAAA,GAAc,CAAC,CAAA;AAAA,MACjB,CAAA;AAAA,MACA,MAAA,EAAQ,CAAC,CAAA,KAAM;AACb,QAAA,UAAA,GAAa,CAAC,CAAA;AAAA,MAChB;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,oBAAA,EAAsB,oBAAA,KAClD,cAAA,CAAe;AAAA,MACb,QAAA;AAAA,MACA,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,qBAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,YAAA,EAAc,gBAAA;AAAA,MACd,QAAA,EAAU,YAAA;AAAA,MACV,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,mBAAmB,YAAA,CAAa,CAAC,cAAA,EAAgB,QAAA,EAAU,GAAG,CAAC,CAAA;AAErE,IAAA,MAAM,WAAW,KAAA,EAAM;AACvB,IAAA,MAAM,KAAK,MAAA,IAAU,QAAA;AACrB,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,IAAA,wBAAA,CAAyB,eAAe,KAAK,CAAA;AAG7C,IAAA,IAAI,UAAU,MAAA,EAAW;AACvB,MAAA,QAAA;AAAA,QACE;AAAA,OACF;AAAA,IACF;AAEA,IAAA,MAAM,gBACJ,OAAO,KAAA,KAAU,SAAA,IAAa,KAAA,KAAU,SAAY,MAAA,GAAY,KAAA;AAElE,IAAA,MAAM,aAAA,GAAgB,IAAA,IAAQ,aAAA,IAAiB,OAAA,IAAW,WAAA;AAE1D,IAAA,MAAM,eAAA,GACJ,CAAC,aAAA,IAAiB,SAAA,EAAW,QAAA,IAAY,WAAW,CAAA,CACjD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAElB,IAAA,MAAM,aAAA,GAAgB,EAAE,GAAG,KAAA,EAAO,GAAG,YAAA,EAAa;AAElD,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA,EAAO,gBAAA,CAAiB,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,MAAA,EAAQ,gBAAA,CAAiB,KAAA,CAAM,MAAM,CAAA;AAAA,MACrC,MAAA,EAAQ,gBAAA,CAAiB,KAAA,CAAM,MAAM,CAAA;AAAA,MACrC,WAAA,EAAa,gBAAA,CAAiB,KAAA,CAAM,WAAW,CAAA;AAAA,MAC/C,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,uBAAuB,KAAA,CAAM,qBAAA;AAAA,MAC7B,uBAAuB,KAAA,CAAM;AAAA,KAC/B;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,aAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,WAAW,GAAG,SAAS,CAAA;AAAA,QACrD,UAAA,EAAS,cAAA;AAAA,QACT,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,YAAA;AAAA,QAGH,QAAA,EAAA;AAAA,UAAA,KAAA,IAAS,CAAC,SAAA,oBACT,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,UAAA,EAAY,WAAW,WAAA,GAAc,MAAA;AAAA,cACrC,QAAA;AAAA,cACA,OAAA,EAAS,EAAA;AAAA,cACR,GAAG,UAAA;AAAA,cAEH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BAEF,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,eAAe,CAAA,EAAG;AAAA,gBAC9C,CAAC,eAAA,CAAgB,OAAO,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,gBACrC,CAAC,eAAA,CAAgB,OAAO,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,gBACrC,CAAC,eAAA,CAAgB,WAAW,CAAC,GAAG,aAAA;AAAA,gBAChC,CAAC,iBAAA,CAAkB,OAAO,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,gBACvC,CAAC,iBAAA,CAAkB,OAAO,CAAC,GAAG,IAAA,KAAS;AAAA,eACxC,CAAA;AAAA,cACD,IAAA,EAAK,cAAA;AAAA,cACL,OAAA,EAAS,MAAM,cAAA,CAAe,OAAA,EAAS,KAAA,EAAM;AAAA,cAE5C,QAAA,EAAA;AAAA,gBAAA,MAAA,mBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAW,IAAA;AAAA,oBACX,SAAA,EAAW,gBAAgB,QAAQ,CAAA;AAAA,oBACnC,EAAA,EAAI,SAAS,SAAS,CAAA,CAAA;AAAA,oBAErB,QAAA,EAAA;AAAA;AAAA,iBACH,GACE,IAAA;AAAA,gCACJ,GAAA;AAAA,kBAAC,OAAA;AAAA,kBAAA;AAAA,oBACC,EAAA;AAAA,oBACA,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,OAAO,CAAA,EAAG;AAAA,sBACtC,CAAC,eAAA,CAAgB,OAAO,CAAC,GAAG;AAAA,qBAC7B,CAAA;AAAA,oBACD,kBAAA,EAAkB,UAAA;AAAA,oBACjB,GAAG,IAAA;AAAA,oBACH,GAAG,UAAA;AAAA,oBACJ,QAAA;AAAA,oBACA,WAAA;AAAA,oBACA,QAAA;AAAA,oBACA,QAAA;AAAA,oBACA,GAAA,EAAK,gBAAA;AAAA,oBACL,YAAA;AAAA;AAAA,sBAEE,SAAA,IAAa,OAAO,KAAA,KAAU,QAAA,GAC1B,oBAAoB,KAAK,CAAA,GACzB,QACE,MAAA,GACA;AAAA,qBAAA;AAAA,oBAER,kBAAA,EAAkB,eAAA;AAAA,oBAClB,cAAA,EAAc,KAAA,GAAQ,CAAC,CAAC,KAAA,GAAQ;AAAA;AAAA,iBAClC;AAAA,gBACC,OAAA,mBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,gBAAgB,yBAAyB,CAAA;AAAA,oBACpD,aAAA,EAAY,SAAA;AAAA,oBAEZ,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAK,OAAA,EAAQ;AAAA;AAAA,iBACxB,GACE,IAAA;AAAA,gBACH,MAAA,mBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,gBAAgB,QAAQ,CAAA;AAAA,oBACnC,aAAA,EAAW,IAAA;AAAA,oBACX,EAAA,EAAI,SAAS,SAAS,CAAA,CAAA;AAAA,oBAErB,QAAA,EAAA;AAAA;AAAA,iBACH,GACE,IAAA;AAAA,gBACH,CAAC,YAAA,IAAgB,CAAC,QAAA,IAAY,CAAC,QAAA,oBAC9B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,iBAAA,CAAkB,iBAAiB,CAAA,EACjD,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,UAAA,EAAW,WAAA;AAAA,sBACX,IAAA,EAAK,OAAA;AAAA,sBACL,SAAA,EAAW,kBAAkB,gBAAgB,CAAA;AAAA,sBAC5C,GAAG,oBAAA;AAAA,sBAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAKA,SAAA,EAAY;AAAA;AAAA,mBACzB;AAAA,kCACA,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,UAAA,EAAW,WAAA;AAAA,sBACX,IAAA,EAAK,OAAA;AAAA,sBACL,SAAA,EAAW,kBAAkB,gBAAgB,CAAA;AAAA,sBAC5C,GAAG,oBAAA;AAAA,sBAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAKC,MAAA,EAAS;AAAA;AAAA;AACtB,iBAAA,EACF;AAAA;AAAA;AAAA,WAEJ;AAAA,UACC,aAAA,mBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,SAAA;AAAA,cACJ,IAAA;AAAA,cACA,WAAA,EAAa,KAAA;AAAA,cACb,KAAA,EACE,OAAO,aAAA,KAAkB,QAAA,IAAY,MAAM,OAAA,CAAQ,aAAa,IAC5D,aAAA,GACA,MAAA;AAAA,cAEN,OAAA;AAAA,cACA,YAAA,EACE,cAAA,CAAe,aAAa,CAAA,GAAI,aAAA,GAAgB,MAAA;AAAA,cAElD;AAAA;AAAA,WACF,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"NumberField-BWRgy-Xq.js","sources":["../../hammer-icon/mdi/round/remove.svg","../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import * as React from \"react\";\nconst SvgRemove = (props) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: \"1em\", height: \"1em\", viewBox: \"0 0 24 24\", ...props }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1z\" }));\nexport default SvgRemove;\n","import {\n  type ReactElement,\n  forwardRef,\n  isValidElement,\n  type ComponentPropsWithoutRef,\n  useId,\n  useRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Spinner } from \"../Spinner\";\nimport textFieldStyles from \"../TextField/TextField.module.scss\";\nimport numberFieldStyles from \"./NumberField.module.scss\";\nimport { Helper, type HelperProps } from \"../../internal/components\";\nimport { warnDeprecatedErrorUsage } from \"../FieldMessage\";\nimport type { LayoutUtilProps, Size, DataTrackingId } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport IconAdd from \"@servicetitan/hammer-icon/mdi/round/add.svg\";\nimport IconRemove from \"@servicetitan/hammer-icon/mdi/round/remove.svg\";\nimport {\n  useFocusWithin,\n  useLayoutPropsUtil,\n  useNumberField,\n} from \"../../internal/hooks\";\nimport {\n  childrenToString,\n  stripInlineMarkdown,\n  warnOnce,\n} from \"../../internal/functions\";\nimport { FieldLabel } from \"../FieldLabel\";\nimport type { FieldLabelProps } from \"../../internal/types\";\n\n/**\n * Props for the NumberField component.\n * @extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\" | \"prefix\" | \"type\" | \"inputMode\" | \"value\" | \"defaultValue\" | \"onFocus\" | \"onBlur\" | \"onChange\">\n * @extends LayoutUtilProps\n * @extends FieldLabelProps\n * @extends DataTrackingId\n */\nexport type NumberFieldProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  | \"size\"\n  | \"prefix\"\n  | \"type\"\n  | \"inputMode\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onChange\"\n> &\n  LayoutUtilProps &\n  FieldLabelProps & {\n    /**\n     * Error state for the field. Pass `true` to indicate error styling without a message.\n     * Pass a string, string[], or ReactElement (deprecated) for error messages.\n     */\n    error?: boolean | string | ReactElement | string[];\n    // TODO(v4.0.0): make label required\n    /**\n     * Label for the field.\n     * Omitting `label` is deprecated — it will be required in v4.0.0. Use `hideLabel` to visually hide it.\n     */\n    label?: string;\n    /**\n     * When `true`, hides the visible label and moves it to `aria-label` on the input.\n     * Requires `label` to be set — the label is always needed for accessibility.\n     * @default false\n     */\n    hideLabel?: boolean;\n    prefix?: string;\n    suffix?: string;\n    size?: Extract<Size, \"small\" | \"medium\" | \"large\">;\n    description?: HelperProps[\"description\"];\n    /**\n     * @deprecated No longer used. Error messages always use `aria-live=\"assertive\"`.\n     */\n    errorAriaLive?: HelperProps[\"errorAriaLive\"];\n    hint?: HelperProps[\"hint\"];\n    /**\n     * Warning message(s) to display. Supports a single string or an array of strings.\n     */\n    warning?: string | string[];\n    loading?: boolean;\n    disabled?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    maximumFractionDigits?: number;\n    minimumFractionDigits?: number;\n    step?: number;\n    value?: number | null;\n    defaultValue?: number | null;\n    onChange?: (value: number | null) => void;\n    onFocus?: (event: React.FocusEvent) => void;\n    onBlur?: (event: React.FocusEvent) => void;\n    hideControls?: boolean;\n    /**\n     * When `true`, applies a subdued primary background to the field to draw attention to it.\n     * @default false\n     */\n    isHighlighted?: boolean;\n  } & DataTrackingId;\n\n/**\n * NumberField component for entering numeric values, with optional\n * increment/decrement stepper controls.\n *\n * Features:\n * - Min/max value constraints and configurable `step`\n * - Fraction-digit formatting via `minimumFractionDigits`/`maximumFractionDigits`\n * - Optional `hideControls` to hide the +/- stepper buttons\n * - Label, hint, description, error, and warning messaging\n * - Loading state with spinner, and a highlighted-field variant\n * - Optional prefix/suffix content\n *\n * @example\n * <NumberField\n *   label=\"Quantity\"\n *   value={quantity}\n *   onChange={setQuantity}\n *   minValue={0}\n *   maxValue={99}\n * />\n */\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      className,\n      error,\n      errorAriaLive: _errorAriaLive,\n      defaultValue: defaultValueProp,\n      value: valueProp,\n      label,\n      moreInfo,\n      prefix,\n      suffix,\n      size,\n      required,\n      onChange: onChangeProp,\n      onFocus: onFocusProp,\n      onBlur: onBlurProp,\n      id: idProp,\n      description,\n      hint,\n      warning,\n      loading,\n      disabled,\n      readOnly,\n      labelProps,\n      style,\n      placeholder,\n      minValue,\n      maxValue,\n      maximumFractionDigits = 0,\n      minimumFractionDigits = 0,\n      step = 1,\n      hideControls = false,\n      hideLabel = false,\n      isHighlighted = false,\n      ...rest\n    } = componentProps;\n    const numberFieldRef = useRef<HTMLDivElement>(null);\n\n    const { props: wrapperProps } = useFocusWithin({\n      onFocus: (e) => {\n        onFocusProp?.(e);\n      },\n      onBlur: (e) => {\n        onBlurProp?.(e);\n      },\n    });\n\n    const { inputProps, inputRef, incrementButtonProps, decrementButtonProps } =\n      useNumberField({\n        minValue,\n        maxValue,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        step,\n        value: valueProp,\n        defaultValue: defaultValueProp,\n        onChange: onChangeProp,\n        label,\n        readOnly,\n      });\n\n    const combinedInputRef = useMergeRefs([numberFieldRef, inputRef, ref]);\n\n    const labelUid = useId();\n    const id = idProp ?? labelUid;\n    const prefixUid = useId();\n    const suffixUid = useId();\n    const helperUid = useId();\n    const moreInfoUid = useId();\n\n    warnDeprecatedErrorUsage(\"NumberField\", error);\n\n    // TODO(v4.0.0): remove once label is required\n    if (label === undefined) {\n      warnOnce(\n        \"NumberField: label will be required in v4.0.0. Use hideLabel to visually hide the label.\",\n      );\n    }\n\n    const errorMessages =\n      typeof error === \"boolean\" || error === undefined ? undefined : error;\n\n    const hasHelperText = hint || errorMessages || warning || description;\n\n    const ariaDescribedBy =\n      [hasHelperText && helperUid, moreInfo && moreInfoUid]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    const styleCombined = { ...style, ...layoutStyles };\n\n    const data = {\n      label: childrenToString(props.label),\n      prefix: childrenToString(props.prefix),\n      suffix: childrenToString(props.suffix),\n      description: childrenToString(props.description),\n      size: props.size,\n      minValue: props.minValue,\n      maxValue: props.maxValue,\n      step: props.step,\n      maximumFractionDigits: props.maximumFractionDigits,\n      minimumFractionDigits: props.minimumFractionDigits,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"NumberField\",\n      data,\n      hasOverride: !!props[\"data-tracking-id\"],\n    });\n\n    return (\n      <div\n        className={cx(textFieldStyles[\"textfield\"], className)}\n        data-anv=\"number-field\"\n        style={styleCombined}\n        {...wrapperProps}\n      >\n        {/* TODO(v4.0.0): simplify to !hideLabel once label is required */}\n        {label && !hideLabel && (\n          <FieldLabel\n            moreInfo={moreInfo}\n            moreInfoId={moreInfo ? moreInfoUid : undefined}\n            required={required}\n            htmlFor={id}\n            {...labelProps}\n          >\n            {label}\n          </FieldLabel>\n        )}\n        <div\n          className={cx(textFieldStyles[\"input-wrapper\"], {\n            [textFieldStyles[\"small\"]]: size === \"small\",\n            [textFieldStyles[\"large\"]]: size === \"large\",\n            [textFieldStyles[\"highlight\"]]: isHighlighted,\n            [numberFieldStyles[\"small\"]]: size === \"small\",\n            [numberFieldStyles[\"large\"]]: size === \"large\",\n          })}\n          role=\"presentation\"\n          onClick={() => numberFieldRef.current?.focus()}\n        >\n          {prefix ? (\n            <div\n              aria-hidden\n              className={textFieldStyles[\"prefix\"]}\n              id={`prefix${prefixUid}`}\n            >\n              {prefix}\n            </div>\n          ) : null}\n          <input\n            id={id}\n            className={cx(textFieldStyles[\"input\"], {\n              [textFieldStyles[\"error\"]]: error,\n            })}\n            data-tracking-id={trackingId}\n            {...rest}\n            {...inputProps}\n            required={required}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            disabled={disabled}\n            ref={combinedInputRef}\n            aria-label={\n              // TODO(v4.0.0): remove typeof check — label will always be string\n              hideLabel && typeof label === \"string\"\n                ? stripInlineMarkdown(label)\n                : label\n                  ? undefined\n                  : placeholder\n            }\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={error ? !!error : undefined}\n          />\n          {loading ? (\n            <div\n              className={textFieldStyles[\"loading-spinner-wrapper\"]}\n              data-testid=\"spinner\"\n            >\n              <Spinner size=\"small\" />\n            </div>\n          ) : null}\n          {suffix ? (\n            <div\n              className={textFieldStyles[\"suffix\"]}\n              aria-hidden\n              id={`suffix${suffixUid}`}\n            >\n              {suffix}\n            </div>\n          ) : null}\n          {!hideControls && !disabled && !readOnly && (\n            <div className={numberFieldStyles[\"stepper-buttons\"]}>\n              <Button\n                appearance=\"secondary\"\n                size=\"small\"\n                className={numberFieldStyles[\"stepper-button\"]}\n                {...decrementButtonProps}\n              >\n                <Icon svg={IconRemove} />\n              </Button>\n              <Button\n                appearance=\"secondary\"\n                size=\"small\"\n                className={numberFieldStyles[\"stepper-button\"]}\n                {...incrementButtonProps}\n              >\n                <Icon svg={IconAdd} />\n              </Button>\n            </div>\n          )}\n        </div>\n        {hasHelperText ? (\n          <Helper\n            id={helperUid}\n            hint={hint}\n            showCounter={false}\n            error={\n              typeof errorMessages === \"string\" || Array.isArray(errorMessages)\n                ? errorMessages\n                : undefined\n            }\n            warning={warning}\n            errorMessage={\n              isValidElement(errorMessages) ? errorMessages : undefined\n            }\n            description={description}\n          />\n        ) : null}\n      </div>\n    );\n  },\n);\n\nNumberField.displayName = \"NumberField\";\n"],"names":["IconRemove","IconAdd"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,MAAM,SAAS,GAAG,CAAC,KAAK,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,oEAAoE,EAAE,CAAC,CAAC;;AC4HhS,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,YAAA,EAAc,cAAA,EAAe,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA,EAAe,cAAA;AAAA,MACf,YAAA,EAAc,gBAAA;AAAA,MACd,KAAA,EAAO,SAAA;AAAA,MACP,KAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MACT,MAAA,EAAQ,UAAA;AAAA,MACR,EAAA,EAAI,MAAA;AAAA,MACJ,WAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,qBAAA,GAAwB,CAAA;AAAA,MACxB,qBAAA,GAAwB,CAAA;AAAA,MACxB,IAAA,GAAO,CAAA;AAAA,MACP,YAAA,GAAe,KAAA;AAAA,MACf,SAAA,GAAY,KAAA;AAAA,MACZ,aAAA,GAAgB,KAAA;AAAA,MAChB,GAAG;AAAA,KACL,GAAI,cAAA;AACJ,IAAA,MAAM,cAAA,GAAiB,OAAuB,IAAI,CAAA;AAElD,IAAA,MAAM,EAAE,KAAA,EAAO,YAAA,EAAa,GAAI,cAAA,CAAe;AAAA,MAC7C,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,QAAA,WAAA,GAAc,CAAC,CAAA;AAAA,MACjB,CAAA;AAAA,MACA,MAAA,EAAQ,CAAC,CAAA,KAAM;AACb,QAAA,UAAA,GAAa,CAAC,CAAA;AAAA,MAChB;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,QAAA,EAAU,oBAAA,EAAsB,oBAAA,KAClD,cAAA,CAAe;AAAA,MACb,QAAA;AAAA,MACA,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,qBAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA,EAAO,SAAA;AAAA,MACP,YAAA,EAAc,gBAAA;AAAA,MACd,QAAA,EAAU,YAAA;AAAA,MACV,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,mBAAmB,YAAA,CAAa,CAAC,cAAA,EAAgB,QAAA,EAAU,GAAG,CAAC,CAAA;AAErE,IAAA,MAAM,WAAW,KAAA,EAAM;AACvB,IAAA,MAAM,KAAK,MAAA,IAAU,QAAA;AACrB,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,YAAY,KAAA,EAAM;AACxB,IAAA,MAAM,cAAc,KAAA,EAAM;AAE1B,IAAA,wBAAA,CAAyB,eAAe,KAAK,CAAA;AAG7C,IAAA,IAAI,UAAU,MAAA,EAAW;AACvB,MAAA,QAAA;AAAA,QACE;AAAA,OACF;AAAA,IACF;AAEA,IAAA,MAAM,gBACJ,OAAO,KAAA,KAAU,SAAA,IAAa,KAAA,KAAU,SAAY,MAAA,GAAY,KAAA;AAElE,IAAA,MAAM,aAAA,GAAgB,IAAA,IAAQ,aAAA,IAAiB,OAAA,IAAW,WAAA;AAE1D,IAAA,MAAM,eAAA,GACJ,CAAC,aAAA,IAAiB,SAAA,EAAW,QAAA,IAAY,WAAW,CAAA,CACjD,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAElB,IAAA,MAAM,aAAA,GAAgB,EAAE,GAAG,KAAA,EAAO,GAAG,YAAA,EAAa;AAElD,IAAA,MAAM,IAAA,GAAO;AAAA,MACX,KAAA,EAAO,gBAAA,CAAiB,KAAA,CAAM,KAAK,CAAA;AAAA,MACnC,MAAA,EAAQ,gBAAA,CAAiB,KAAA,CAAM,MAAM,CAAA;AAAA,MACrC,MAAA,EAAQ,gBAAA,CAAiB,KAAA,CAAM,MAAM,CAAA;AAAA,MACrC,WAAA,EAAa,gBAAA,CAAiB,KAAA,CAAM,WAAW,CAAA;AAAA,MAC/C,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,UAAU,KAAA,CAAM,QAAA;AAAA,MAChB,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,uBAAuB,KAAA,CAAM,qBAAA;AAAA,MAC7B,uBAAuB,KAAA,CAAM;AAAA,KAC/B;AAEA,IAAA,MAAM,aAAa,aAAA,CAAc;AAAA,MAC/B,IAAA,EAAM,aAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAA,EAAa,CAAC,CAAC,KAAA,CAAM,kBAAkB;AAAA,KACxC,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,WAAW,GAAG,SAAS,CAAA;AAAA,QACrD,UAAA,EAAS,cAAA;AAAA,QACT,KAAA,EAAO,aAAA;AAAA,QACN,GAAG,YAAA;AAAA,QAGH,QAAA,EAAA;AAAA,UAAA,KAAA,IAAS,CAAC,SAAA,oBACT,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,UAAA,EAAY,WAAW,WAAA,GAAc,MAAA;AAAA,cACrC,QAAA;AAAA,cACA,OAAA,EAAS,EAAA;AAAA,cACR,GAAG,UAAA;AAAA,cAEH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BAEF,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,eAAe,CAAA,EAAG;AAAA,gBAC9C,CAAC,eAAA,CAAgB,OAAO,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,gBACrC,CAAC,eAAA,CAAgB,OAAO,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,gBACrC,CAAC,eAAA,CAAgB,WAAW,CAAC,GAAG,aAAA;AAAA,gBAChC,CAAC,iBAAA,CAAkB,OAAO,CAAC,GAAG,IAAA,KAAS,OAAA;AAAA,gBACvC,CAAC,iBAAA,CAAkB,OAAO,CAAC,GAAG,IAAA,KAAS;AAAA,eACxC,CAAA;AAAA,cACD,IAAA,EAAK,cAAA;AAAA,cACL,OAAA,EAAS,MAAM,cAAA,CAAe,OAAA,EAAS,KAAA,EAAM;AAAA,cAE5C,QAAA,EAAA;AAAA,gBAAA,MAAA,mBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAW,IAAA;AAAA,oBACX,SAAA,EAAW,gBAAgB,QAAQ,CAAA;AAAA,oBACnC,EAAA,EAAI,SAAS,SAAS,CAAA,CAAA;AAAA,oBAErB,QAAA,EAAA;AAAA;AAAA,iBACH,GACE,IAAA;AAAA,gCACJ,GAAA;AAAA,kBAAC,OAAA;AAAA,kBAAA;AAAA,oBACC,EAAA;AAAA,oBACA,SAAA,EAAW,EAAA,CAAG,eAAA,CAAgB,OAAO,CAAA,EAAG;AAAA,sBACtC,CAAC,eAAA,CAAgB,OAAO,CAAC,GAAG;AAAA,qBAC7B,CAAA;AAAA,oBACD,kBAAA,EAAkB,UAAA;AAAA,oBACjB,GAAG,IAAA;AAAA,oBACH,GAAG,UAAA;AAAA,oBACJ,QAAA;AAAA,oBACA,WAAA;AAAA,oBACA,QAAA;AAAA,oBACA,QAAA;AAAA,oBACA,GAAA,EAAK,gBAAA;AAAA,oBACL,YAAA;AAAA;AAAA,sBAEE,SAAA,IAAa,OAAO,KAAA,KAAU,QAAA,GAC1B,oBAAoB,KAAK,CAAA,GACzB,QACE,MAAA,GACA;AAAA,qBAAA;AAAA,oBAER,kBAAA,EAAkB,eAAA;AAAA,oBAClB,cAAA,EAAc,KAAA,GAAQ,CAAC,CAAC,KAAA,GAAQ;AAAA;AAAA,iBAClC;AAAA,gBACC,OAAA,mBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,gBAAgB,yBAAyB,CAAA;AAAA,oBACpD,aAAA,EAAY,SAAA;AAAA,oBAEZ,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAK,OAAA,EAAQ;AAAA;AAAA,iBACxB,GACE,IAAA;AAAA,gBACH,MAAA,mBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,gBAAgB,QAAQ,CAAA;AAAA,oBACnC,aAAA,EAAW,IAAA;AAAA,oBACX,EAAA,EAAI,SAAS,SAAS,CAAA,CAAA;AAAA,oBAErB,QAAA,EAAA;AAAA;AAAA,iBACH,GACE,IAAA;AAAA,gBACH,CAAC,YAAA,IAAgB,CAAC,QAAA,IAAY,CAAC,QAAA,oBAC9B,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,iBAAA,CAAkB,iBAAiB,CAAA,EACjD,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,UAAA,EAAW,WAAA;AAAA,sBACX,IAAA,EAAK,OAAA;AAAA,sBACL,SAAA,EAAW,kBAAkB,gBAAgB,CAAA;AAAA,sBAC5C,GAAG,oBAAA;AAAA,sBAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAKA,SAAA,EAAY;AAAA;AAAA,mBACzB;AAAA,kCACA,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,UAAA,EAAW,WAAA;AAAA,sBACX,IAAA,EAAK,OAAA;AAAA,sBACL,SAAA,EAAW,kBAAkB,gBAAgB,CAAA;AAAA,sBAC5C,GAAG,oBAAA;AAAA,sBAEJ,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAKC,MAAA,EAAS;AAAA;AAAA;AACtB,iBAAA,EACF;AAAA;AAAA;AAAA,WAEJ;AAAA,UACC,aAAA,mBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,SAAA;AAAA,cACJ,IAAA;AAAA,cACA,WAAA,EAAa,KAAA;AAAA,cACb,KAAA,EACE,OAAO,aAAA,KAAkB,QAAA,IAAY,MAAM,OAAA,CAAQ,aAAa,IAC5D,aAAA,GACA,MAAA;AAAA,cAEN,OAAA;AAAA,cACA,YAAA,EACE,cAAA,CAAe,aAAa,CAAA,GAAI,aAAA,GAAgB,MAAA;AAAA,cAElD;AAAA;AAAA,WACF,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}

package/dist/NumberField.js

@@ -1,2 +1,2 @@
-export { N as NumberField, N as default } from './NumberField-ASyiQu5l.js';
+export { N as NumberField, N as default } from './NumberField-BWRgy-Xq.js';
 //# sourceMappingURL=NumberField.js.map

package/dist/{Page-B5yLLq76.js → Page-B-Wjr7sP.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
 import { createContext, forwardRef, useContext, useState, useLayoutEffect, useRef, useEffect, useMemo, useCallback } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
-import { P as Popover, a as usePopoverContext } from './AiMark-Bf0x9FF3.js';
+import { P as Popover, a as usePopoverContext } from './AiMark-DkHvwBwf.js';
+import { S as SvgSegment, a as SvgChevronLeft, b as SvgSettings } from './settings-Bsahaln8.js';
 import { S as SvgKeyboardArrowDown } from './keyboard_arrow_down-C8WQ38p1.js';
 import { S as SvgKeyboardArrowUp } from './keyboard_arrow_up-CxzK6LAl.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
@@ -10,7 +10,7 @@ import { b as BreakpointLg } from './primitive-BXgYQTTw.js';
 import { useTrackingId } from './useTrackingId.js';
 import { B as Button } from './Button-Dwh_Nd4l.js';
 import { I as Icon } from './Icon-B5zwN7GD.js';
-import { T as Tooltip } from './Tooltip-CzrJgl98.js';
+import { T as Tooltip } from './Tooltip-hen6P8WV.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { F as Flex } from './Flex-CRF7gj0_.js';
 import { L as Layout } from './Layout-C2Q2hyLG.js';
@@ -19,35 +19,36 @@ import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { B as ButtonLink } from './ButtonLink-DOFAxNvC.js';
-import { B as Breadcrumbs } from './Breadcrumbs-CR1od1rZ.js';
-import { M as Menu } from './Menu-BMn1CSr1.js';
-import { T as TextField } from './TextField-DWbDQfHY.js';
-import { T as Text } from './Text-CEJHoh0p.js';
-import { C as Chip } from './Chip-DLK31FkK.js';
+import { B as Breadcrumbs } from './Breadcrumbs-d1lHjb_U.js';
+import { M as Menu } from './Menu-CM0EndhK.js';
+import { T as TextField } from './TextField-DQ0i2nlz.js';
+import { T as Text } from './Text-DdNE3hPR.js';
+import { C as Chip } from './Chip-B3pbD3hQ.js';
 import { createPortal } from 'react-dom';
-import { D as Dialog } from './Dialog-PcuDCqK7.js';
+import { D as Dialog } from './Dialog-Clg6Kd96.js';
 import { d as drillDownStyles, D as DrillDownContext } from './DrillDown.module-1VBKDZRA.js';
-import { u as useDrillDownContextState } from './useInitialFocus-BUxEDMEG.js';
+import { u as useDrillDownContextState } from './useInitialFocus-BIvXK1Rp.js';
 import { u as useDrillDownContext } from './useDrillDownContext-D5_NjqY4.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 
-import './Page.css';const page = "_page_1a6ta_1";
-const container = "_container_1a6ta_29";
-const panel = "_panel_1a6ta_58";
-const open = "_open_1a6ta_58";
-const small = "_small_1a6ta_58";
-const medium = "_medium_1a6ta_61";
-const large = "_large_1a6ta_64";
-const sidebar = "_sidebar_1a6ta_67";
-const collapsed = "_collapsed_1a6ta_67";
-const content = "_content_1a6ta_77";
-const noPadding = "_noPadding_1a6ta_365";
-const header = "_header_1a6ta_442";
-const layout = "_layout_1a6ta_446";
-const title = "_title_1a6ta_454";
-const chips = "_chips_1a6ta_464";
-const actions = "_actions_1a6ta_468";
-const description = "_description_1a6ta_481";
+import './Page.css';const page = "_page_1hgjb_1";
+const container = "_container_1hgjb_29";
+const panel = "_panel_1hgjb_58";
+const open = "_open_1hgjb_58";
+const small = "_small_1hgjb_58";
+const medium = "_medium_1hgjb_61";
+const large = "_large_1hgjb_64";
+const sidebar = "_sidebar_1hgjb_67";
+const collapsed = "_collapsed_1hgjb_67";
+const content = "_content_1hgjb_77";
+const noPadding = "_noPadding_1hgjb_366";
+const sticky = "_sticky_1hgjb_432";
+const header = "_header_1hgjb_498";
+const layout = "_layout_1hgjb_502";
+const title = "_title_1hgjb_510";
+const chips = "_chips_1hgjb_520";
+const actions = "_actions_1hgjb_524";
+const description = "_description_1hgjb_537";
 const styles = {
 	page: page,
 	container: container,
@@ -59,39 +60,39 @@ const styles = {
 	sidebar: sidebar,
 	collapsed: collapsed,
 	content: content,
-	"content-footer": "_content-footer_1a6ta_77",
-	"virtual-scroll-container": "_virtual-scroll-container_1a6ta_84",
-	"content-wrapper": "_content-wrapper_1a6ta_92",
-	"footer-slot": "_footer-slot_1a6ta_99",
-	"content-inner": "_content-inner_1a6ta_109",
-	"content-header-inner": "_content-header-inner_1a6ta_131",
-	"sidebar-inner": "_sidebar-inner_1a6ta_195",
-	"sidebar-header": "_sidebar-header_1a6ta_234",
-	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_1a6ta_256",
-	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_1a6ta_256",
-	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_1a6ta_277",
-	"sidebar-adaptive-container": "_sidebar-adaptive-container_1a6ta_281",
-	"sidebar-adaptive": "_sidebar-adaptive_1a6ta_256",
-	"toggle-button-wrapper": "_toggle-button-wrapper_1a6ta_295",
-	"toggle-button-tooltip": "_toggle-button-tooltip_1a6ta_304",
-	"toggle-button": "_toggle-button_1a6ta_295",
+	"content-footer": "_content-footer_1hgjb_77",
+	"virtual-scroll-container": "_virtual-scroll-container_1hgjb_84",
+	"content-wrapper": "_content-wrapper_1hgjb_92",
+	"footer-slot": "_footer-slot_1hgjb_99",
+	"content-inner": "_content-inner_1hgjb_109",
+	"content-header-inner": "_content-header-inner_1hgjb_131",
+	"sidebar-inner": "_sidebar-inner_1hgjb_195",
+	"sidebar-header": "_sidebar-header_1hgjb_234",
+	"sidebar-adaptive-trigger-container": "_sidebar-adaptive-trigger-container_1hgjb_256",
+	"sidebar-adaptive-trigger": "_sidebar-adaptive-trigger_1hgjb_256",
+	"sidebar-adaptive-trigger-icon": "_sidebar-adaptive-trigger-icon_1hgjb_277",
+	"sidebar-adaptive-container": "_sidebar-adaptive-container_1hgjb_281",
+	"sidebar-adaptive": "_sidebar-adaptive_1hgjb_256",
+	"toggle-button-wrapper": "_toggle-button-wrapper_1hgjb_295",
+	"toggle-button-tooltip": "_toggle-button-tooltip_1hgjb_304",
+	"toggle-button": "_toggle-button_1hgjb_295",
 	noPadding: noPadding,
-	"panel-inner": "_panel-inner_1a6ta_365",
-	"drilldown-open": "_drilldown-open_1a6ta_403",
+	"panel-header": "_panel-header_1hgjb_370",
+	"panel-content": "_panel-content_1hgjb_371",
+	"panel-footer": "_panel-footer_1hgjb_372",
+	"panel-inner": "_panel-inner_1hgjb_376",
+	"drilldown-open": "_drilldown-open_1hgjb_410",
+	sticky: sticky,
 	header: header,
 	layout: layout,
-	"title-wrapper": "_title-wrapper_1a6ta_454",
+	"title-wrapper": "_title-wrapper_1hgjb_510",
 	title: title,
-	"preference-action": "_preference-action_1a6ta_461",
+	"preference-action": "_preference-action_1hgjb_517",
 	chips: chips,
 	actions: actions,
 	description: description
 };
 
-const SvgSegment = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10 18h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm7 6h10c.55 0 1-.45 1-1s-.45-1-1-1H10c-.55 0-1 .45-1 1s.45 1 1 1z" }));
-
-const SvgChevronLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41z" }));
-
 const PageSideBarContext = createContext(
   null
 );
@@ -240,8 +241,34 @@ const PageSidebarHeader = forwardRef(
 );
 PageSidebarHeader.displayName = "Page.SidebarHeader";
 
-const SvgSettings = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19.5 12c0-.23-.01-.45-.03-.68l1.86-1.41c.4-.3.51-.86.26-1.3l-1.87-3.23a.987.987 0 0 0-1.25-.42l-2.15.91c-.37-.26-.76-.49-1.17-.68l-.29-2.31c-.06-.5-.49-.88-.99-.88h-3.73c-.51 0-.94.38-1 .88l-.29 2.31c-.41.19-.8.42-1.17.68l-2.15-.91c-.46-.2-1-.02-1.25.42L2.41 8.62c-.25.44-.14.99.26 1.3l1.86 1.41a7.343 7.343 0 0 0 0 1.35l-1.86 1.41c-.4.3-.51.86-.26 1.3l1.87 3.23c.25.44.79.62 1.25.42l2.15-.91c.37.26.76.49 1.17.68l.29 2.31c.06.5.49.88.99.88h3.73c.5 0 .93-.38.99-.88l.29-2.31c.41-.19.8-.42 1.17-.68l2.15.91c.46.2 1 .02 1.25-.42l1.87-3.23c.25-.44.14-.99-.26-1.3l-1.86-1.41c.03-.23.04-.45.04-.68zm-7.46 3.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }));
-
+const renderMenuItems = (actions) => actions.map((action, index) => {
+  const icon = typeof action.icon === "function" ? action.icon : action.icon && "after" in action.icon ? action.icon.after : void 0;
+  return /* @__PURE__ */ jsx(
+    Menu.Item,
+    {
+      label: action.label,
+      onClick: action.onClick,
+      disabled: action.disabled,
+      icon,
+      className: action.className
+    },
+    index
+  );
+});
+const renderPrimaryMenuTrigger = (primary) => ({ ref, ...triggerProps }) => {
+  const { items: _items, label, ...buttonProps } = primary;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "primary",
+      ...buttonProps,
+      icon: { after: SvgKeyboardArrowDown },
+      ...triggerProps,
+      ref,
+      children: label
+    }
+  );
+};
 const PageHeader = forwardRef(
   (props, ref) => {
     const {
@@ -299,53 +326,37 @@ const PageHeader = forwardRef(
       ) }),
       /* @__PURE__ */ jsx(Tooltip.Content, { children: preferenceAction["aria-label"] })
     ] }));
+    const secondaryActions = actions?.secondary ?? [];
+    const primaryAction = actions?.primary;
+    const collapseSecondary = secondaryActions.length >= 3 || secondaryActions.length >= 2 && !!primaryAction;
     const actionItems = actions && /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", className: styles.actions, children: [
-      actions.primary && (!actions.secondary || actions.secondary.length === 0) && /* @__PURE__ */ jsx(Button, { appearance: "primary", ...actions.primary, children: actions.primary.label }),
-      !!actions.secondary?.length && actions.secondary.length < 3 && !actions.primary && actions.secondary.map((action, index) => /* @__PURE__ */ jsx(Button, { appearance: "secondary", ...action, children: action.label }, index)),
-      actions.primary && !!actions.secondary?.length && actions.secondary.length === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { appearance: "secondary", ...actions.secondary[0], children: actions.secondary[0].label }),
-        /* @__PURE__ */ jsx(Button, { appearance: "primary", ...actions.primary, children: actions.primary.label })
-      ] }),
-      !!actions.secondary?.length && (actions.secondary.length >= 3 || actions.secondary.length >= 2 && actions.primary) && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Menu,
-          {
-            trigger: ({ ref: ref2, ...rest2 }) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsx(
-                Tooltip.Trigger,
-                {
-                  ref: ref2,
-                  children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      appearance: "secondary",
-                      icon: SvgMoreVert,
-                      "aria-label": "More actions",
-                      ...rest2
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(Tooltip.Content, { children: "More actions" })
-            ] }),
-            children: actions.secondary.map((action, index) => {
-              const icon = typeof action.icon === "function" ? action.icon : action.icon && "after" in action.icon ? action.icon.after : void 0;
-              return /* @__PURE__ */ jsx(
-                Menu.Item,
-                {
-                  label: action.label,
-                  onClick: action.onClick,
-                  disabled: action.disabled,
-                  icon,
-                  className: action.className
-                },
-                index
-              );
-            })
-          }
-        ),
-        actions.primary && /* @__PURE__ */ jsx(Button, { appearance: "primary", ...actions.primary, children: actions.primary.label })
-      ] })
+      collapseSecondary ? /* @__PURE__ */ jsx(
+        Menu,
+        {
+          trigger: ({ ref: ref2, ...rest2 }) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "secondary",
+                icon: SvgMoreVert,
+                "aria-label": "More actions",
+                ...rest2,
+                ref: ref2
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tooltip.Content, { children: "More actions" })
+          ] }),
+          children: renderMenuItems(secondaryActions)
+        }
+      ) : secondaryActions.map((action, index) => /* @__PURE__ */ jsx(Button, { appearance: "secondary", ...action, children: action.label }, index)),
+      primaryAction && ("items" in primaryAction ? /* @__PURE__ */ jsx(
+        Menu,
+        {
+          label: primaryAction.label,
+          trigger: renderPrimaryMenuTrigger(primaryAction),
+          children: renderMenuItems(primaryAction.items)
+        }
+      ) : /* @__PURE__ */ jsx(Button, { appearance: "primary", ...primaryAction, children: primaryAction.label }))
     ] });
     const headerClassName = cx(styles.content, styles.header, className);
     const headerContentClassName = cx(
@@ -554,9 +565,86 @@ const PageContent = forwardRef(
 );
 PageContent.displayName = "PageContent";
 
+const PagePanelContext = createContext({});
+
+const PagePanelHeader = forwardRef(
+  (props, ref) => {
+    const { className, children, ...rest } = props;
+    const { headerRef } = useContext(PagePanelContext);
+    const classNames = cx(styles["panel-header"], className);
+    return /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: classNames,
+        "data-anv": "page-panel-header",
+        ref: useMergeRefs([ref, headerRef]),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+PagePanelHeader.displayName = "PagePanelHeader";
+
+const PagePanelContent = forwardRef(
+  (props, ref) => {
+    const { className, children, sticky = false, style, ...rest } = props;
+    const { headerRef } = useContext(PagePanelContext);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useEffect(() => {
+      const headerElement = headerRef?.current;
+      if (!sticky || !headerElement) return;
+      const updateHeight = () => {
+        setHeaderHeight(headerElement.offsetHeight || 0);
+      };
+      updateHeight();
+      const resizeObserver = new ResizeObserver(updateHeight);
+      resizeObserver.observe(headerElement);
+      return () => resizeObserver.disconnect();
+    }, [sticky, headerRef]);
+    const contentClassNames = cx(styles["panel-content"], className, {
+      [styles["sticky"]]: sticky
+    });
+    const stickyStyle = sticky ? { top: `${headerHeight}px` } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: contentClassNames,
+        "data-anv": "page-panel-content",
+        ref,
+        style: { ...stickyStyle, ...style },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+PagePanelContent.displayName = "PagePanelContent";
+
+const PagePanelFooter = forwardRef(
+  (props, ref) => {
+    const { className, children, sticky = false, ...rest } = props;
+    const classNames = cx(styles["panel-footer"], className, {
+      [styles["sticky"]]: sticky
+    });
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        className: classNames,
+        "data-anv": "page-panel-footer",
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+PagePanelFooter.displayName = "PagePanelFooter";
+
 const PagePanelInner = ({
   style,
   open,
+  hostedInDialog,
   children
 }) => {
   const { index } = useDrillDownContext();
@@ -567,14 +655,17 @@ const PagePanelInner = ({
     "div",
     {
       className: classNames,
-      tabIndex: typeof open !== "undefined" && open ? 0 : -1,
-      style: { ...style, overflowY: index === void 0 ? "auto" : "hidden" },
-      children: /* @__PURE__ */ jsx("div", { children })
+      tabIndex: hostedInDialog ? void 0 : typeof open !== "undefined" && open ? 0 : -1,
+      style: {
+        ...style,
+        ...hostedInDialog ? {} : { overflowY: index === void 0 ? "auto" : "hidden" }
+      },
+      children
     }
   );
 };
-const PagePanel = forwardRef(
-  (props, ref) => {
+const PagePanel = Object.assign(
+  forwardRef((props, ref) => {
     const {
       children,
       open,
@@ -587,6 +678,7 @@ const PagePanel = forwardRef(
       ...rest
     } = props;
     const [isMobile, setIsMobile] = useState(false);
+    const headerRef = useRef(null);
     const classNames = cx(
       [styles.panel, drillDownStyles.panel],
       [styles[size]],
@@ -641,7 +733,7 @@ const PagePanel = forwardRef(
           open,
           defaultDrillDownIndex,
           onDrillDownContextChange,
-          children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(Dialog.Content, { children: /* @__PURE__ */ jsx(PagePanelContext.Provider, { value: { headerRef }, children: /* @__PURE__ */ jsx(
             "div",
             {
               className: classNames,
@@ -649,13 +741,13 @@ const PagePanel = forwardRef(
               "aria-disabled": !open,
               ref,
               ...rest,
-              children
+              children: /* @__PURE__ */ jsx(PagePanelInner, { style, open, hostedInDialog: true, children })
             }
-          ) })
+          ) }) })
         }
       );
     }
-    return /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DrillDownContext.Provider, { value: drillDownContextProviderValue, children: /* @__PURE__ */ jsx(PagePanelContext.Provider, { value: { headerRef }, children: /* @__PURE__ */ jsx(
       "div",
       {
         className: classNames,
@@ -665,7 +757,66 @@ const PagePanel = forwardRef(
         ...rest,
         children: /* @__PURE__ */ jsx(PagePanelInner, { style, open, children })
       }
-    ) });
+    ) }) });
+  }),
+  {
+    /**
+     * Header component for the panel that stays pinned to the top of the panel's scrollable area.
+     *
+     * Features:
+     * - Sticky positioning at the top of the panel's scrollable content
+     * - Proper semantic HTML structure
+     * - Consistent padding and styling with the design system
+     * - Supports all standard header element props
+     *
+     * @example
+     * <Page.Panel.Header>
+     *   <Text variant="headline" el="h3">Panel Title</Text>
+     * </Page.Panel.Header>
+     */
+    Header: PagePanelHeader,
+    /**
+     * Content container for the panel that holds the main scrollable content area.
+     *
+     * Features:
+     * - Grows to fill the space between the panel's header and footer
+     * - Scrolls independently of the header and footer once content overflows
+     * - Optional sticky positioning below the header, for a second sticky region (e.g. a filter bar)
+     * - Proper semantic HTML structure
+     * - Consistent padding and styling with the design system
+     * - Supports all standard div element props
+     *
+     * @example
+     * <Page.Panel.Content>
+     *   <Text>Panel content goes here</Text>
+     * </Page.Panel.Content>
+     *
+     * @example
+     * // A second, sticky Content region acting as a sub-header below Page.Panel.Header
+     * <Page.Panel.Content sticky>
+     *   <TextField placeholder="Filter results..." />
+     * </Page.Panel.Content>
+     * <Page.Panel.Content>
+     *   <Text>Scrollable results</Text>
+     * </Page.Panel.Content>
+     */
+    Content: PagePanelContent,
+    /**
+     * Footer component for the panel that displays action buttons and controls.
+     *
+     * Features:
+     * - Flex layout that right-aligns action buttons and wraps on overflow
+     * - Optional sticky positioning at the bottom of the panel
+     * - Proper semantic HTML structure
+     * - Consistent padding and styling with the design system
+     * - Supports all standard footer element props
+     *
+     * @example
+     * <Page.Panel.Footer sticky>
+     *   <Button appearance="primary" onClick={handleSave}>Save</Button>
+     * </Page.Panel.Footer>
+     */
+    Footer: PagePanelFooter
   }
 );
 PagePanel.displayName = "PagePanel";
@@ -837,11 +988,20 @@ const Page = Object.assign(
      * - Automatic mobile dialog conversion
      * - Keyboard navigation and accessibility support
      * - Smooth animations and transitions
+     * - Compound component structure with Header, Content, and Footer
+     * - Sticky header and optional sticky footer around a scrollable content area
      *
      * @example
      * <Page.Panel open={isOpen} size="medium">
-     *   <Text variant="headline" el="h3">Panel Content</Text>
-     *   <Button onClick={() => setIsOpen(false)}>Close</Button>
+     *   <Page.Panel.Header>
+     *     <Text variant="headline" el="h3">Panel Title</Text>
+     *   </Page.Panel.Header>
+     *   <Page.Panel.Content>
+     *     <Text>Panel content</Text>
+     *   </Page.Panel.Content>
+     *   <Page.Panel.Footer>
+     *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+     *   </Page.Panel.Footer>
      * </Page.Panel>
      */
     Panel: PagePanel,
@@ -866,4 +1026,4 @@ const Page = Object.assign(
 Page.displayName = "Page";
 
 export { Page as P };
-//# sourceMappingURL=Page-B5yLLq76.js.map
+//# sourceMappingURL=Page-B-Wjr7sP.js.map